





<!DOCTYPE html>
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
  <head>
    <meta charset="utf-8">
  <link rel="dns-prefetch" href="https://github.githubassets.com">
  <link rel="dns-prefetch" href="https://avatars.githubusercontent.com">
  <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
  <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
  <link rel="preconnect" href="https://github.githubassets.com" crossorigin>
  <link rel="preconnect" href="https://avatars.githubusercontent.com">



  <link crossorigin="anonymous" media="all" integrity="sha512-Xvl7qd6ZFq6aBrViMpY+7UKRL79QzxxYG1kyELGe/sH4sV3eCks8DDXxa3WolACcKPac42eqrfe6m0jazyAIPQ==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-5ef97ba9de9916ae9a06b56232963eed.css" />
  
    <link crossorigin="anonymous" media="all" integrity="sha512-rcBopHrwspQORpXVLihZMP22sFwuIo3fL1DyFo5aXwWnV5FzV/nlAGnX/36fI9GQVc2VN7MiIT34RMCwq8jemg==" rel="stylesheet" href="https://github.githubassets.com/assets/behaviors-adc068a47af0b2940e4695d52e285930.css" />
    
    
    
    <link crossorigin="anonymous" media="all" integrity="sha512-RcaHDG4W+gCBHxbL4bN+1B8+KVIVqSKxodnFQu32CPdT/Mtxz2AfZYyNYqY+2BkgC8Bytm0ZkOpkB7t7oFIW2g==" rel="stylesheet" href="https://github.githubassets.com/assets/github-45c6870c6e16fa00811f16cbe1b37ed4.css" />

  <script crossorigin="anonymous" defer="defer" integrity="sha512-DHpNa+QkQaUCk1eji+SQGDsKa8B63teT5nbKT3/TQ38T2hEDfT9B9OddmUKcMnQ8GaECHElNcJkpGhIThksyXA==" type="application/javascript" src="https://github.githubassets.com/assets/environment-0c7a4d6b.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-HP2Mvig4HXg8jfmGDNyHQA926EIhsEnEmglfqF8GzaJ/ble4OXug7GkcnQlvBRARAAxiSjtRZlXi6Y5946iRRA==" type="application/javascript" src="https://github.githubassets.com/assets/chunk-frameworks-1cfd8cbe.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-FKXP1Zj/06ElnU2g7tU//J/ilS/i7vutZAiWJRr59SBWKrnmHKIKNwPT+it8dEIdaGzT3DozyEbQQeZUEqvcMA==" type="application/javascript" src="https://github.githubassets.com/assets/chunk-vendor-14a5cfd5.js"></script>
  
  <script crossorigin="anonymous" defer="defer" integrity="sha512-9s0o9HusjaKciUh3VkWjfLedaVnLoWrUgCB0HERc6sLtYrXOGqzj68/jjphqCawbexLaVDHv08CTTciAvxPFtg==" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-f6cd28f4.js"></script>
  
    <script crossorigin="anonymous" defer="defer" integrity="sha512-BUDbrXZbK9QorUrf0KoEbZAJhTnz+BqMm10bqZCK6w5Hwy7YaORQ4F4DXhLkAVTvaJhNhxxeXgmgJLP0TB7TOw==" type="application/javascript" data-module-id="./chunk-advanced.js" data-src="https://github.githubassets.com/assets/chunk-advanced-0540dbad.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-5tWKSr7mhAzSh4Sx5YRFgKftdGxKwHKnOGYw5DlxjHhkQVURYFU3Bk5IMOGMKuAiJTlC3OXYM3xzGcyjzuEFQQ==" type="application/javascript" data-module-id="./chunk-animate-on-scroll.js" data-src="https://github.githubassets.com/assets/chunk-animate-on-scroll-e6d58a4a.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-0MZorw3oXnKy5eeSwQ9xGrKU4hxQeCXxmyxhneIHNhDIqu8vWh8mHss9FlC75Xd/bPWxFDCvdOo57tnTR46nbA==" type="application/javascript" data-module-id="./chunk-codemirror.js" data-src="https://github.githubassets.com/assets/chunk-codemirror-d0c668af.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-M6W/sGLOuJXCIkw+doDl6zl7J9q2DmqdwftQCtyEiZM/UJNGRVQdyKwI/PAMxD12se/wCx3ZcyJs9nz0o0OSVw==" type="application/javascript" data-module-id="./chunk-color-modes.js" data-src="https://github.githubassets.com/assets/chunk-color-modes-33a5bfb0.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-71HZu1T5JWqRNF9wrm2NXZAqYVvzxZ8Dvor5U5l/LuEBbGCBX57Sny60Rj+qUZZAvEBGFlNsz179DEn2HFwgVA==" type="application/javascript" data-module-id="./chunk-confetti.js" data-src="https://github.githubassets.com/assets/chunk-confetti-ef51d9bb.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-P29U0lNmhUj353VrCWp6czdhNpMtF70xVKf4GBGFVKCoqGtxp0sywAM8/46+iC0kdFiRvM13EBvDnq6oyWRwiw==" type="application/javascript" data-module-id="./chunk-contributions-spider-graph.js" data-src="https://github.githubassets.com/assets/chunk-contributions-spider-graph-3f6f54d2.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-arflMFcVzVAYaP2n7m7gklPChWsVsCDtRPav2Cb6bqLeJf8pgbojWJ3EseKXILCIqfxl/v6arBduZ9SLmpMEZw==" type="application/javascript" data-module-id="./chunk-delayed-loading-element.js" data-src="https://github.githubassets.com/assets/chunk-delayed-loading-element-6ab7e530.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-6j/oSF+kbW+yetNPvI684VzAu9pzug6Vj2h+3u1LdCuRhR4jnuiHZfeQKls3nxcT/S3H+oIt7FtigE/aeoj+gg==" type="application/javascript" data-module-id="./chunk-drag-drop.js" data-src="https://github.githubassets.com/assets/chunk-drag-drop-ea3fe848.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-VSSd+Yzi2iMS+pibY6hD/WdypxAEdob5F2RMKxuKcAHS2EpFYJPeTXoVxt0NXg03tfj2dka2mEtHS+vjpYSaDw==" type="application/javascript" data-module-id="./chunk-edit-hook-secret-element.js" data-src="https://github.githubassets.com/assets/chunk-edit-hook-secret-element-55249df9.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-ErqZFlIt7zIbLoZHvwfq9Zjo5zo+Y1A410nePDGvK+WVTVP10iNTfoqdOOSZNSy1gtLKIWDIIiOV30lr6zUJCA==" type="application/javascript" data-module-id="./chunk-edit.js" data-src="https://github.githubassets.com/assets/chunk-edit-12ba9916.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-aiqMIGGZGo8AQMjcoImKPMTsZVVRl6htCSY7BpRmpGPG/AF+Wq+P/Oj/dthWQOIk9cCNMPEas7O2zAR6oqn0tA==" type="application/javascript" data-module-id="./chunk-emoji-picker-element.js" data-src="https://github.githubassets.com/assets/chunk-emoji-picker-element-6a2a8c20.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-pyMtBe0iN5jUu1XXnpodO2HUF6HtgHFSW7xU1hiqWn0IrSun5a14jZWjqfSQNbj7lAyY9xBA3dNsyydapPhobg==" type="application/javascript" data-module-id="./chunk-failbot.js" data-src="https://github.githubassets.com/assets/chunk-failbot-a7232d05.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-sy0KBzl3Hruew+orJ1/E4cyuUixtV0uS03SSHpYRzhAepWejugyPs3AwHpQ+Em5HaMfd1MPz/M4+xEaFbQc5gA==" type="application/javascript" data-module-id="./chunk-feature-callout-element.js" data-src="https://github.githubassets.com/assets/chunk-feature-callout-element-b32d0a07.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-h8LRqLfdvdK2/kSKj8JYy6jyBdlTywxL4lqwV6OVOd3SCPRgUJ4/r3KHFQZPuYw0G7AWWhJY/IoitYLvAWFe5Q==" type="application/javascript" data-module-id="./chunk-filter-input.js" data-src="https://github.githubassets.com/assets/chunk-filter-input-87c2d1a8.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-ZDEs2KxFQg2a+jrEHbGKTNtzB+AQK3msBhv/KXLFiX9sV8vJaa9+9lpIW/kWd9JKtpJ63vTC/wuOJo7QJTbKKg==" type="application/javascript" data-module-id="./chunk-get-repo-element.js" data-src="https://github.githubassets.com/assets/chunk-get-repo-element-64312cd8.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-hDiTAZNldjiUNPk5eNthz6zUVY57FFqFU+n2D7WRYygzCxbDtwO9ODKDsEXxYb8kAMI7gTC8/QR3dXtHVCVgcA==" type="application/javascript" data-module-id="./chunk-insights-query.js" data-src="https://github.githubassets.com/assets/chunk-insights-query-84389301.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-SBLYXQ5tCZ/pcd1gcxrF4aTurb6Pi6aXi+k8JwE7zDNc0RmTnAPUdQ0a4/c9kt8sIhRmc8UyY/dDz+3r1os5MA==" type="application/javascript" data-module-id="./chunk-invitations.js" data-src="https://github.githubassets.com/assets/chunk-invitations-4812d85d.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-kHBm6CHcorsoWgbEfXx9ONevjreBpcPig/6CwUA1AEDHRHq5fuqHSKAFVbS+ri41o89ud/eW9mdT8gdg7bvEyQ==" type="application/javascript" data-module-id="./chunk-jump-to.js" data-src="https://github.githubassets.com/assets/chunk-jump-to-907066e8.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-VtdawM/OSsu+d6v25ZY6UcQa/GGLAStSESjsqdEwx+ey88GNYGkQ24o+JFFo4lY+7wLMRf7aCrLxkA5SquBoNQ==" type="application/javascript" data-module-id="./chunk-launch-code-element.js" data-src="https://github.githubassets.com/assets/chunk-launch-code-element-56d75ac0.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-RR5Uk+KE9M/CsqLcmgReChS7ZDjm8gxcOnDYWWkMdeTsrpW/xDlJHQEgUfuEC6HJXfyPNcW+oBTHqMnucNYGTQ==" type="application/javascript" data-module-id="./chunk-line-chart.js" data-src="https://github.githubassets.com/assets/chunk-line-chart-451e5493.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-RduaLAviB2ygvRK/eX5iwzYO43ie7svrJ0rYJs06x7XqpRl/IK8PPBscBWM9Moo5Z86DK2iRLE2+aR7TJ5Uc2Q==" type="application/javascript" data-module-id="./chunk-metric-selection-element.js" data-src="https://github.githubassets.com/assets/chunk-metric-selection-element-45db9a2c.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-7hZ031ngiF36wGsfcoyyCWTqwYxjX+qeTLtCV7CJ+IO+wzkzCm1RoR3WzWczfWmwLNqr+Hu3kQOgkBaGn4ntWQ==" type="application/javascript" data-module-id="./chunk-notification-list-focus.js" data-src="https://github.githubassets.com/assets/chunk-notification-list-focus-ee1674df.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-GntjGfOwMXsNQc5gxmzT306dC63LK08Oq5HrYuzBerIW2O/B/z8qHbjDImFUB4Zzu8kvKV1xU9BmU7CaLLeNeg==" type="application/javascript" data-module-id="./chunk-premium-runners.js" data-src="https://github.githubassets.com/assets/chunk-premium-runners-1a7b6319.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-oaK5DHO3+lQ/luphbKbJlYucI+1wdb1ckzLGh1p3HjnhMptUGr7FmMNwVBUGLpkHyIbve+fYuX9Ct1wzKH+6ag==" type="application/javascript" data-module-id="./chunk-presence-avatars.js" data-src="https://github.githubassets.com/assets/chunk-presence-avatars-a1a2b90c.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-ma0OOy3nj0c1cqBx0BkcmIFsLqcSZ+MIukQxyEFM/OWTzZpG+QMgOoWPAHZz43M6fyjAUG1jH6c/6LPiiKPCyw==" type="application/javascript" data-module-id="./chunk-profile-pins-element.js" data-src="https://github.githubassets.com/assets/chunk-profile-pins-element-99ad0e3b.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-hgoSKLTlL8I3IWr/TLONCU+N4kdCtdrHCrrud4NKhgRlLrTw0XUPhqBaDdZUiFSzDQRw/nFQ1kw2VeTm0g9+lA==" type="application/javascript" data-module-id="./chunk-profile.js" data-src="https://github.githubassets.com/assets/chunk-profile-860a1228.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-W/CGm7ARGkQrOSmTAUvHx6XJH3sPfyUEY2kRDWT84K5WU9i2fNXvLxdipvaaMTQbR6AjSSxrQOBj6lR1kzgB0Q==" type="application/javascript" data-module-id="./chunk-readme-toc-element.js" data-src="https://github.githubassets.com/assets/chunk-readme-toc-element-5bf0869b.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-DzzdRhToySuRxHkYlTIW4fLX3/yY6VlVkg+er2yKynUSbiLqTRji+tl29UFifcFSVbkWNtqU+PzJ5bQA4VagMg==" type="application/javascript" data-module-id="./chunk-ref-selector.js" data-src="https://github.githubassets.com/assets/chunk-ref-selector-0f3cdd46.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-I7iI902D1A6s8umCD2hbF4o0hKW1lrpNfRJ2H7uw6fdMVR/8Jdtn19b3G/DDIT4lpXOUToZXTmbYnFQAYc5gag==" type="application/javascript" data-module-id="./chunk-responsive-underlinenav.js" data-src="https://github.githubassets.com/assets/chunk-responsive-underlinenav-23b888f7.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-SWy36S28Js+/YzsvYgmp+IEdC0qtMcBf6sYhXTEcj1aFPCLPOTOnOKqzFiNyH2oNVDd+u5Qi8eqYINSIu28LFQ==" type="application/javascript" data-module-id="./chunk-runner-groups.js" data-src="https://github.githubassets.com/assets/chunk-runner-groups-496cb7e9.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-SVdK0K69PnQ4FChdpl650OR+vplYWXqddxNkEGKhQf6tkehqvKkFEg5LQSZgCVKt2tfc9CnWJlmKCwbTTipEjg==" type="application/javascript" data-module-id="./chunk-series-table.js" data-src="https://github.githubassets.com/assets/chunk-series-table-49574ad0.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-tk76eoSLUqXSVZ8ANzPprrOImFIV1zQ/VBV+WzG8ZjZpVPH8cLkMH/ur5HJB1lxx9/yo+V2wjDF96t4qfUwZLA==" type="application/javascript" data-module-id="./chunk-severity-calculator-element.js" data-src="https://github.githubassets.com/assets/chunk-severity-calculator-element-b64efa7a.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-j7Pb1H+2Xt4YIKSrJLLXxl/NNkkpW//5PLTpu58JGD8pqRPODDjJKqjO6YPZd++BB4VJubHPjzvuMXhW/9jcqA==" type="application/javascript" data-module-id="./chunk-sortable-behavior.js" data-src="https://github.githubassets.com/assets/chunk-sortable-behavior-8fb3dbd4.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-nKa3UdA2O7Ve4Jn24gaB20yUfJvS7wlnd8Q8C+iWD8i2tXLgaKemDWkLeexeQdrs+an98FCl5fOiy0J+izn+tQ==" type="application/javascript" data-module-id="./chunk-three.module.js" data-src="https://github.githubassets.com/assets/chunk-three.module-9ca6b751.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-WK8VXw3lfUQ/VRW0zlgKPhcMUqH0uTnB/KzePUPdZhCm/HpxfXXHKTGvj5C0Oex7+zbIM2ECzULbtTCT4ug3yg==" type="application/javascript" data-module-id="./chunk-toast.js" data-src="https://github.githubassets.com/assets/chunk-toast-58af155f.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-1vSZvwpr106s8wjSNFNFGVmFT2E4YjI2N8k6JqiSb28GGYMkEJUhveotmvB00Z4bQZM61ZgvWcXax1U3M48gLQ==" type="application/javascript" data-module-id="./chunk-tweetsodium.js" data-src="https://github.githubassets.com/assets/chunk-tweetsodium-d6f499bf.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-fvcOOYapCxPkDRQWz2WQzrqL6rRhX88yHWF87fb9Xny2Fq4lri0ONaVFL7XDSTiTyu4OTp+8WoyfMVpgGUaaVg==" type="application/javascript" data-module-id="./chunk-unveil.js" data-src="https://github.githubassets.com/assets/chunk-unveil-7ef70e39.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-V1S2L90J/leeVmnOy/FbkG/OQV4USnz5ZyX6DdCbkdljoIDtBFoxUohUQokpegatnFHQmch34+humD9mitEyeg==" type="application/javascript" data-module-id="./chunk-user-status-submit.js" data-src="https://github.githubassets.com/assets/chunk-user-status-submit-5754b62f.js"></script>
    <script crossorigin="anonymous" defer="defer" integrity="sha512-cKu/+X7gT+WVH4sXKt0g3G77bfQfcgwurRObM+dt8XylPm9eEWI+/aWKhVab6VsYuvvuI5BTriKXhXfJwaSXdQ==" type="application/javascript" data-module-id="./chunk-webgl-warp.js" data-src="https://github.githubassets.com/assets/chunk-webgl-warp-70abbff9.js"></script>
  
  <script crossorigin="anonymous" defer="defer" integrity="sha512-6EeKDb+OkdY9KoCkC6MamzsRn6MF1EmYGgNAZq5frJxUWFZ/RsdYtqrGvhq3SXieoWzRJPHanpIgq3AJfQUItg==" type="application/javascript" src="https://github.githubassets.com/assets/codespaces-e8478a0d.js"></script>
<script crossorigin="anonymous" defer="defer" integrity="sha512-YXjGsE/FbG31jHGE+71lQbC5C2AWR6aoZmYxoD0vgIQNkSLjj0Faczvyk8tPdumns+DIwOVA2VlrSlt0stioqQ==" type="application/javascript" src="https://github.githubassets.com/assets/repositories-6178c6b0.js"></script>
<script crossorigin="anonymous" defer="defer" integrity="sha512-E8U8knz112xo09iJevWlgrHpfkqgqE3pMeFAgbqGiICeDLM928ko2PBFoJ74sIMHKdOvoeACKCGi/Dimyf1xGg==" type="application/javascript" src="https://github.githubassets.com/assets/topic-suggestions-13c53c92.js"></script>
<script crossorigin="anonymous" defer="defer" integrity="sha512-1BSCl46ZgJajOCY2vE7GRBLMSTgWT/v+5O7Dx0vWXGgHo1X30l8EVkbjHpuSjhmaw0hGIEFRc8z7x4t5D1Eyhw==" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-d4148297.js"></script>

  <meta name="viewport" content="width=device-width">
  
  <title>GitHub - TonyGermaneri/canvas-datagrid: Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.</title>
    <meta name="description" content="Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element. - GitHub - TonyGermaneri/canvas-datagrid: Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.">
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
  <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
  <meta property="fb:app_id" content="1401488693436528">
  <meta name="apple-itunes-app" content="app-id=1477376905" />
    <meta name="twitter:image:src" content="https://opengraph.githubassets.com/b674fd64333cfeb963ae47e9904ae16eb809a551d6d7873858152001a461424e/TonyGermaneri/canvas-datagrid" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="GitHub - TonyGermaneri/canvas-datagrid: Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element." /><meta name="twitter:description" content="Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element. - GitHub - TonyGermaneri/can..." />
    <meta property="og:image" content="https://opengraph.githubassets.com/b674fd64333cfeb963ae47e9904ae16eb809a551d6d7873858152001a461424e/TonyGermaneri/canvas-datagrid" /><meta property="og:image:alt" content="Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element. - GitHub - TonyGermaneri/can..." /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="GitHub - TonyGermaneri/canvas-datagrid: Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element." /><meta property="og:url" content="https://github.com/TonyGermaneri/canvas-datagrid" /><meta property="og:description" content="Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element. - GitHub - TonyGermaneri/can..." />



    

  <link rel="assets" href="https://github.githubassets.com/">
  

  <meta name="request-id" content="5F89:1135:219EC0:229A89:61304787" data-pjax-transient="true"/><meta name="html-safe-nonce" content="d0a55a590509627c25cedb1818c7c84a84ad936a7f85ecf66f8b91f284a33411" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6Imh0dHBzOi8vb3NzLnNoZWV0anMuY29tLyIsInJlcXVlc3RfaWQiOiI1Rjg5OjExMzU6MjE5RUMwOjIyOUE4OTo2MTMwNDc4NyIsInZpc2l0b3JfaWQiOiIxMjc3OTI4OTUxNzQ5MDM1Nzg1IiwicmVnaW9uX2VkZ2UiOiJhcC1zb3V0aGVhc3QtMSIsInJlZ2lvbl9yZW5kZXIiOiJhcC1zb3V0aGVhc3QtMSJ9" data-pjax-transient="true"/><meta name="visitor-hmac" content="21e020e6c873372f462278c4577782fd990999921b074c0690a7e312d73100da" data-pjax-transient="true"/>

    <meta name="hovercard-subject-tag" content="repository:74969884" data-pjax-transient>


  <meta name="github-keyboard-shortcuts" content="repository" data-pjax-transient="true" />

  

  <meta name="selected-link" value="repo_source" data-pjax-transient>

    <meta name="google-site-verification" content="c1kuD-K2HIVF635lypcsWPoD4kilo5-jA_wBFyT4uMY">
  <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
  <meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
  <meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">

  <meta name="octolytics-host" content="collector.githubapp.com" /><meta name="octolytics-app-id" content="github" /><meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event" /><meta name="octolytics-url" content="https://collector.githubapp.com/github/collect" />

  <meta name="analytics-location" content="/&lt;user-name&gt;/&lt;repo-name&gt;" data-pjax-transient="true" />

  



  <meta name="optimizely-datafile" content="{&quot;version&quot;: &quot;4&quot;, &quot;rollouts&quot;: [], &quot;typedAudiences&quot;: [], &quot;anonymizeIP&quot;: true, &quot;projectId&quot;: &quot;16737760170&quot;, &quot;variables&quot;: [], &quot;featureFlags&quot;: [], &quot;experiments&quot;: [{&quot;status&quot;: &quot;Running&quot;, &quot;audienceIds&quot;: [], &quot;variations&quot;: [{&quot;variables&quot;: [], &quot;id&quot;: &quot;20432530142&quot;, &quot;key&quot;: &quot;control&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;20418424478&quot;, &quot;key&quot;: &quot;treatment&quot;}], &quot;id&quot;: &quot;20437502121&quot;, &quot;key&quot;: &quot;recommended_plan_and_benefits_in_signup&quot;, &quot;layerId&quot;: &quot;20428035169&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;20418424478&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;20418424478&quot;, &quot;endOfRange&quot;: 10000}], &quot;forcedVariations&quot;: {}}, {&quot;status&quot;: &quot;Running&quot;, &quot;audienceIds&quot;: [], &quot;variations&quot;: [{&quot;variables&quot;: [], &quot;id&quot;: &quot;20438636352&quot;, &quot;key&quot;: &quot;control&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;20484957397&quot;, &quot;key&quot;: &quot;treatment&quot;}], &quot;id&quot;: &quot;20479227424&quot;, &quot;key&quot;: &quot;growth_ghec_onboarding_experience&quot;, &quot;layerId&quot;: &quot;20467848595&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;20484957397&quot;, &quot;endOfRange&quot;: 1000}, {&quot;entityId&quot;: &quot;20438636352&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;20438636352&quot;, &quot;endOfRange&quot;: 6000}, {&quot;entityId&quot;: &quot;20484957397&quot;, &quot;endOfRange&quot;: 8000}, {&quot;entityId&quot;: &quot;20484957397&quot;, &quot;endOfRange&quot;: 10000}], &quot;forcedVariations&quot;: {}}, {&quot;status&quot;: &quot;Running&quot;, &quot;audienceIds&quot;: [], &quot;variations&quot;: [{&quot;variables&quot;: [], &quot;id&quot;: &quot;20508232513&quot;, &quot;key&quot;: &quot;control&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;20533742085&quot;, &quot;key&quot;: &quot;treatment&quot;}], &quot;id&quot;: &quot;20512531891&quot;, &quot;key&quot;: &quot;growth_pull_request_actions_prompt&quot;, &quot;layerId&quot;: &quot;20529822202&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;20533742085&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;20508232513&quot;, &quot;endOfRange&quot;: 10000}], &quot;forcedVariations&quot;: {}}, {&quot;status&quot;: &quot;Running&quot;, &quot;audienceIds&quot;: [], &quot;variations&quot;: [{&quot;variables&quot;: [], &quot;id&quot;: &quot;20543572345&quot;, &quot;key&quot;: &quot;control&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;20510876757&quot;, &quot;key&quot;: &quot;treatment&quot;}], &quot;id&quot;: &quot;20518037255&quot;, &quot;key&quot;: &quot;growth_issue_actions_prompt&quot;, &quot;layerId&quot;: &quot;20522524291&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;20510876757&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;20543572345&quot;, &quot;endOfRange&quot;: 10000}], &quot;forcedVariations&quot;: {}}], &quot;audiences&quot;: [{&quot;conditions&quot;: &quot;[\&quot;or\&quot;, {\&quot;match\&quot;: \&quot;exact\&quot;, \&quot;name\&quot;: \&quot;$opt_dummy_attribute\&quot;, \&quot;type\&quot;: \&quot;custom_attribute\&quot;, \&quot;value\&quot;: \&quot;$opt_dummy_value\&quot;}]&quot;, &quot;id&quot;: &quot;$opt_dummy_audience&quot;, &quot;name&quot;: &quot;Optimizely-Generated Audience for Backwards Compatibility&quot;}], &quot;groups&quot;: [{&quot;policy&quot;: &quot;random&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;20528555359&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;20470139194&quot;, &quot;endOfRange&quot;: 10000}], &quot;experiments&quot;: [{&quot;status&quot;: &quot;Running&quot;, &quot;audienceIds&quot;: [], &quot;variations&quot;: [{&quot;variables&quot;: [], &quot;id&quot;: &quot;20489782769&quot;, &quot;key&quot;: &quot;control&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;20464890159&quot;, &quot;key&quot;: &quot;calculator&quot;}], &quot;id&quot;: &quot;20470139194&quot;, &quot;key&quot;: &quot;pricing_calculator&quot;, &quot;layerId&quot;: &quot;20484939336&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;20489782769&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;20464890159&quot;, &quot;endOfRange&quot;: 10000}], &quot;forcedVariations&quot;: {&quot;1268183565.1620830370&quot;: &quot;control&quot;, &quot;1684648857.1628809053&quot;: &quot;calculator&quot;}}], &quot;id&quot;: &quot;20536171833&quot;}], &quot;attributes&quot;: [{&quot;id&quot;: &quot;16822470375&quot;, &quot;key&quot;: &quot;user_id&quot;}, {&quot;id&quot;: &quot;17143601254&quot;, &quot;key&quot;: &quot;spammy&quot;}, {&quot;id&quot;: &quot;18175660309&quot;, &quot;key&quot;: &quot;organization_plan&quot;}, {&quot;id&quot;: &quot;18813001570&quot;, &quot;key&quot;: &quot;is_logged_in&quot;}, {&quot;id&quot;: &quot;19073851829&quot;, &quot;key&quot;: &quot;geo&quot;}, {&quot;id&quot;: &quot;20175462351&quot;, &quot;key&quot;: &quot;requestedCurrency&quot;}], &quot;botFiltering&quot;: false, &quot;accountId&quot;: &quot;16737760170&quot;, &quot;events&quot;: [{&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;17911811441&quot;, &quot;key&quot;: &quot;hydro_click.dashboard.teacher_toolbox_cta&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18124116703&quot;, &quot;key&quot;: &quot;submit.organizations.complete_sign_up&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18145892387&quot;, &quot;key&quot;: &quot;no_metric.tracked_outside_of_optimizely&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18178755568&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.add_repo&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18180553241&quot;, &quot;key&quot;: &quot;submit.repository_imports.create&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18186103728&quot;, &quot;key&quot;: &quot;click.help.learn_more_about_repository_creation&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18188530140&quot;, &quot;key&quot;: &quot;test_event.do_not_use_in_production&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18191963644&quot;, &quot;key&quot;: &quot;click.empty_org_repo_cta.transfer_repository&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18195612788&quot;, &quot;key&quot;: &quot;click.empty_org_repo_cta.import_repository&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18210945499&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.invite_members&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18211063248&quot;, &quot;key&quot;: &quot;click.empty_org_repo_cta.create_repository&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18215721889&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.update_profile&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18224360785&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.dismiss&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18234832286&quot;, &quot;key&quot;: &quot;submit.organization_activation.complete&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18252392383&quot;, &quot;key&quot;: &quot;submit.org_repository.create&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18257551537&quot;, &quot;key&quot;: &quot;submit.org_member_invitation.create&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18259522260&quot;, &quot;key&quot;: &quot;submit.organization_profile.update&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18564603625&quot;, &quot;key&quot;: &quot;view.classroom_select_organization&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18568612016&quot;, &quot;key&quot;: &quot;click.classroom_sign_in_click&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18572592540&quot;, &quot;key&quot;: &quot;view.classroom_name&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18574203855&quot;, &quot;key&quot;: &quot;click.classroom_create_organization&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18582053415&quot;, &quot;key&quot;: &quot;click.classroom_select_organization&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18589463420&quot;, &quot;key&quot;: &quot;click.classroom_create_classroom&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18591323364&quot;, &quot;key&quot;: &quot;click.classroom_create_first_classroom&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18591652321&quot;, &quot;key&quot;: &quot;click.classroom_grant_access&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18607131425&quot;, &quot;key&quot;: &quot;view.classroom_creation&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;, &quot;20479227424&quot;], &quot;id&quot;: &quot;18831680583&quot;, &quot;key&quot;: &quot;upgrade_account_plan&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;19064064515&quot;, &quot;key&quot;: &quot;click.signup&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19075373687&quot;, &quot;key&quot;: &quot;click.view_account_billing_page&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19077355841&quot;, &quot;key&quot;: &quot;click.dismiss_signup_prompt&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;19079713938&quot;, &quot;key&quot;: &quot;click.contact_sales&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19120963070&quot;, &quot;key&quot;: &quot;click.compare_account_plans&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;19151690317&quot;, &quot;key&quot;: &quot;click.upgrade_account_cta&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19424193129&quot;, &quot;key&quot;: &quot;click.open_account_switcher&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19520330825&quot;, &quot;key&quot;: &quot;click.visit_account_profile&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19540970635&quot;, &quot;key&quot;: &quot;click.switch_account_context&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19730198868&quot;, &quot;key&quot;: &quot;submit.homepage_signup&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19820830627&quot;, &quot;key&quot;: &quot;click.homepage_signup&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;19988571001&quot;, &quot;key&quot;: &quot;click.create_enterprise_trial&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20036538294&quot;, &quot;key&quot;: &quot;click.create_organization_team&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20040653299&quot;, &quot;key&quot;: &quot;click.input_enterprise_trial_form&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20062030003&quot;, &quot;key&quot;: &quot;click.continue_with_team&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20068947153&quot;, &quot;key&quot;: &quot;click.create_organization_free&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20086636658&quot;, &quot;key&quot;: &quot;click.signup_continue.username&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20091648988&quot;, &quot;key&quot;: &quot;click.signup_continue.create_account&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20103637615&quot;, &quot;key&quot;: &quot;click.signup_continue.email&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20111574253&quot;, &quot;key&quot;: &quot;click.signup_continue.password&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20120044111&quot;, &quot;key&quot;: &quot;view.pricing_page&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20152062109&quot;, &quot;key&quot;: &quot;submit.create_account&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20165800992&quot;, &quot;key&quot;: &quot;submit.upgrade_payment_form&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20171520319&quot;, &quot;key&quot;: &quot;submit.create_organization&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;], &quot;id&quot;: &quot;20222645674&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.discuss_your_needs&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20227443657&quot;, &quot;key&quot;: &quot;submit.verify_primary_user_email&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;], &quot;id&quot;: &quot;20234607160&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.try_enterprise&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;], &quot;id&quot;: &quot;20238175784&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.team&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;], &quot;id&quot;: &quot;20239847212&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.continue_free&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;], &quot;id&quot;: &quot;20251097193&quot;, &quot;key&quot;: &quot;recommended_plan&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20438619534&quot;, &quot;key&quot;: &quot;click.pricing_calculator.1_member&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20456699683&quot;, &quot;key&quot;: &quot;click.pricing_calculator.15_members&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20467868331&quot;, &quot;key&quot;: &quot;click.pricing_calculator.10_members&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20476267432&quot;, &quot;key&quot;: &quot;click.trial_days_remaining&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20476357660&quot;, &quot;key&quot;: &quot;click.discover_feature&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20479287901&quot;, &quot;key&quot;: &quot;click.pricing_calculator.custom_members&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;], &quot;id&quot;: &quot;20481107083&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.apply_teacher_benefits&quot;}, {&quot;experimentIds&quot;: [&quot;20470139194&quot;], &quot;id&quot;: &quot;20483089392&quot;, &quot;key&quot;: &quot;click.pricing_calculator.5_members&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20484283944&quot;, &quot;key&quot;: &quot;click.onboarding_task&quot;}, {&quot;experimentIds&quot;: [&quot;20437502121&quot;], &quot;id&quot;: &quot;20484996281&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.apply_student_benefits&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20486713726&quot;, &quot;key&quot;: &quot;click.onboarding_task_breadcrumb&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20490791319&quot;, &quot;key&quot;: &quot;click.upgrade_to_enterprise&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20491786766&quot;, &quot;key&quot;: &quot;click.talk_to_us&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20494144087&quot;, &quot;key&quot;: &quot;click.dismiss_enterprise_trial&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20499722759&quot;, &quot;key&quot;: &quot;completed_all_tasks&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20500710104&quot;, &quot;key&quot;: &quot;completed_onboarding_tasks&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20513160672&quot;, &quot;key&quot;: &quot;click.read_doc&quot;}, {&quot;experimentIds&quot;: [&quot;20512531891&quot;], &quot;id&quot;: &quot;20516196762&quot;, &quot;key&quot;: &quot;actions_enabled&quot;}, {&quot;experimentIds&quot;: [&quot;20479227424&quot;], &quot;id&quot;: &quot;20518980986&quot;, &quot;key&quot;: &quot;click.dismiss_trial_banner&quot;}, {&quot;experimentIds&quot;: [&quot;20518037255&quot;], &quot;id&quot;: &quot;20535446721&quot;, &quot;key&quot;: &quot;click.issue_actions_prompt.dismiss_prompt&quot;}, {&quot;experimentIds&quot;: [&quot;20518037255&quot;], &quot;id&quot;: &quot;20557002247&quot;, &quot;key&quot;: &quot;click.issue_actions_prompt.setup_workflow&quot;}, {&quot;experimentIds&quot;: [&quot;20512531891&quot;], &quot;id&quot;: &quot;20595070227&quot;, &quot;key&quot;: &quot;click.pull_request_setup_workflow&quot;}], &quot;revision&quot;: &quot;861&quot;}" />
  <!-- To prevent page flashing, the optimizely JS needs to be loaded in the
    <head> tag before the DOM renders -->
  <script crossorigin="anonymous" defer="defer" integrity="sha512-+jU501Se8pk+19AWlNhSR/uznFeWGI9ndTB52CGeN8Fze/Srm+6H0FN6FCnvSdvVMtHwsV1NGq1sX5RvBwEGAg==" type="application/javascript" src="https://github.githubassets.com/assets/optimizely-fa3539d3.js"></script>



  

      <meta name="hostname" content="github.com">
    <meta name="user-login" content="">


      <meta name="expected-hostname" content="github.com">


    <meta name="enabled-features" content="BRANCH_PROTECTION_RULE_WEBHOOK,MARKETPLACE_PENDING_INSTALLATIONS">

  <meta http-equiv="x-pjax-version" content="bae19f70c11794b80dbaa5ca3aaae07ebd66f25c4418ad819c03fbaf534fc2e7">
  <meta http-equiv="x-pjax-csp-version" content="3bd1d66a0bcbe1085660ff2182e7b557cc239441f75f3ec846eba18193d4c44b">
  <meta http-equiv="x-pjax-css-version" content="75053413f9650300ca0bc171692435e13ccfe1577705119fcf459fee71025641">
  <meta http-equiv="x-pjax-js-version" content="985b73e2b42ded5d1575290a6040f0c018ec4bb30fc593182ad72ed0de8cb89f">
  

    
  <meta name="go-import" content="github.com/TonyGermaneri/canvas-datagrid git https://github.com/TonyGermaneri/canvas-datagrid.git">

  <meta name="octolytics-dimension-user_id" content="17577567" /><meta name="octolytics-dimension-user_login" content="TonyGermaneri" /><meta name="octolytics-dimension-repository_id" content="74969884" /><meta name="octolytics-dimension-repository_nwo" content="TonyGermaneri/canvas-datagrid" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="74969884" /><meta name="octolytics-dimension-repository_network_root_nwo" content="TonyGermaneri/canvas-datagrid" />



    <link rel="canonical" href="https://github.com/TonyGermaneri/canvas-datagrid" data-pjax-transient>


  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">

  <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">

  <meta name="browser-optimizely-client-errors-url" content="https://api.github.com/_private/browser/optimizely_client/errors">

  <link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">
  <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png">
  <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg">

<meta name="theme-color" content="#1e2327">
<meta name="color-scheme" content="light dark" />


  <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">

<meta name="enabled-homepage-translation-languages" content="">

  </head>

  <body class="logged-out env-production page-responsive" style="word-wrap: break-word;">
    

    <div class="position-relative js-header-wrapper ">
      <a href="#start-of-content" class="px-2 py-4 color-bg-info-inverse color-text-white show-on-focus js-skip-to-content">Skip to content</a>
      <span data-view-component="true" class="progress-pjax-loader js-pjax-loader-bar Progress position-fixed width-full">
    <span style="background-color: #79b8ff;width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar"></span>
</span>      
      


        
            
<header class="Header-old header-logged-out js-details-container Details position-relative f4 py-2" role="banner">
  <div class="container-xl d-lg-flex flex-items-center p-responsive">
    <div class="d-flex flex-justify-between flex-items-center">
        <a class="mr-4" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
          <svg height="32" class="octicon octicon-mark-github color-text-white" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
        </a>

          <div class="d-lg-none css-truncate css-truncate-target width-fit p-2">
            

          </div>

        <div class="d-flex flex-items-center">
              <a href="/signup?ref_cta=Sign+up&amp;ref_loc=header+logged+out&amp;ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&amp;source=header-repo"
                class="d-inline-block d-lg-none f5 color-text-white no-underline border color-border-tertiary rounded-2 px-2 py-1 mr-3 mr-sm-5"
                data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e47d5a036993731999cd6a791fe68866fffa5541b504e3b86ec6bd61a0e2e90d"
              >
                Sign&nbsp;up
              </a>

          <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target btn-link d-lg-none mt-1">
  
  
            <svg height="24" class="octicon octicon-three-bars color-text-white" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path></svg>

  

</button>        </div>
    </div>

    <div class="HeaderMenu HeaderMenu--logged-out position-fixed top-0 right-0 bottom-0 height-fit position-lg-relative d-lg-flex flex-justify-between flex-items-center flex-auto">
      <div class="d-flex d-lg-none flex-justify-end border-bottom color-bg-secondary p-3">
        <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target btn-link">
  
  
          <svg height="24" class="octicon octicon-x color-text-secondary" viewBox="0 0 24 24" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M5.72 5.72a.75.75 0 011.06 0L12 10.94l5.22-5.22a.75.75 0 111.06 1.06L13.06 12l5.22 5.22a.75.75 0 11-1.06 1.06L12 13.06l-5.22 5.22a.75.75 0 01-1.06-1.06L10.94 12 5.72 6.78a.75.75 0 010-1.06z"></path></svg>

  

</button>      </div>

        <nav class="mt-0 px-3 px-lg-0 mb-5 mb-lg-0" aria-label="Global">
          <ul class="d-lg-flex list-style-none">
              <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
                <details class="HeaderMenu-details details-overlay details-reset width-full">
                  <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
                    Why GitHub?
                    <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
                      <path d="M1,1l6.2,6L13,1"></path>
                    </svg>
                  </summary>
                  <div class="dropdown-menu flex-auto rounded px-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
                    <a href="/features" class="py-2 lh-condensed-ultra d-block Link--primary no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Features">Features <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a>
                    <ul class="list-style-none f5 pb-3">


                          <li class="edge-item-fix"><a href="/mobile" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Mobile <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                          <li class="edge-item-fix"><a href="/features/actions" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Actions <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                          <li class="edge-item-fix"><a href="/features/codespaces" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Codespaces <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                          <li class="edge-item-fix"><a href="/features/packages" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Packages <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                          <li class="edge-item-fix"><a href="/features/security" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Security <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                          <li class="edge-item-fix"><a href="/features/code-review/" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Code review <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                          <li class="edge-item-fix"><a href="/features/issues/" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Issues <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                          <li class="edge-item-fix"><a href="/features/integrations" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">Integrations <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>


                    </ul>

                    <ul class="list-style-none mb-0 border-lg-top pt-lg-3">
                      <li class="edge-item-fix"><a href="/sponsors" class="py-2 lh-condensed-ultra d-block no-underline Link--primary no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Sponsors">GitHub Sponsors <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="/customer-stories" class="py-2 lh-condensed-ultra d-block no-underline Link--primary no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Customer stories">Customer stories<span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                    </ul>
                  </div>
                </details>
              </li>
              <li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3">
                <a href="/team" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Team">Team</a>
              </li>
              <li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3">
                <a href="/enterprise" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Enterprise">Enterprise</a>
              </li>

              <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
                <details class="HeaderMenu-details details-overlay details-reset width-full">
                  <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
                    Explore
                    <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
                      <path d="M1,1l6.2,6L13,1"></path>
                    </svg>
                  </summary>

                  <div class="dropdown-menu flex-auto rounded px-0 pt-2 pb-0 mt-0 pb-4 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
                    <ul class="list-style-none mb-3">
                      <li class="edge-item-fix"><a href="/explore" class="py-2 lh-condensed-ultra d-block Link--primary no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Explore">Explore GitHub <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                    </ul>

                    <h4 class="color-text-tertiary text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Learn and contribute</h4>
                    <ul class="list-style-none mb-3">
                      <li class="edge-item-fix"><a href="/topics" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Topics">Topics <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                        <li class="edge-item-fix"><a href="/collections" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Collections">Collections <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="/trending" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Trending">Trending <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="https://lab.github.com/" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Learning lab">Learning Lab <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="https://opensource.guide" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Open source guides">Open source guides <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                    </ul>

                    <h4 class="color-text-tertiary text-normal text-mono f5 mb-2 border-lg-top pt-lg-3">Connect with others</h4>
                    <ul class="list-style-none mb-0">
                      <li class="edge-item-fix"><a href="https://github.com/readme" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover">The ReadME Project <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="https://github.com/events" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Events">Events <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="https://github.community" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Community forum">Community forum <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="https://education.github.com" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to GitHub Education">GitHub Education <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="https://stars.github.com" class="py-2 pb-0 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to GitHub Stars Program">GitHub Stars program <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                    </ul>
                  </div>
                </details>
              </li>

              <li class="border-bottom border-lg-bottom-0 mr-0 mr-lg-3">
                <a href="/marketplace" class="HeaderMenu-link no-underline py-3 d-block d-lg-inline-block" data-ga-click="(Logged out) Header, go to Marketplace">Marketplace</a>
              </li>

              <li class="d-block d-lg-flex flex-lg-nowrap flex-lg-items-center border-bottom border-lg-bottom-0 mr-0 mr-lg-3 edge-item-fix position-relative flex-wrap flex-justify-between d-flex flex-items-center ">
                <details class="HeaderMenu-details details-overlay details-reset width-full">
                  <summary class="HeaderMenu-summary HeaderMenu-link px-0 py-3 border-0 no-wrap d-block d-lg-inline-block">
                    Pricing
                    <svg x="0px" y="0px" viewBox="0 0 14 8" xml:space="preserve" fill="none" class="icon-chevon-down-mktg position-absolute position-lg-relative">
                       <path d="M1,1l6.2,6L13,1"></path>
                    </svg>
                  </summary>

                  <div class="dropdown-menu flex-auto rounded px-0 pt-2 pb-4 mt-0 p-lg-4 position-relative position-lg-absolute left-0 left-lg-n4">
                    <a href="/pricing" class="pb-2 lh-condensed-ultra d-block Link--primary no-underline h5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Pricing">Plans <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a>

                    <ul class="list-style-none mb-3">
                      <li class="edge-item-fix"><a href="/pricing#feature-comparison" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Compare plans">Compare plans <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                      <li class="edge-item-fix"><a href="https://enterprise.github.com/contact" class="py-2 lh-condensed-ultra d-block Link--secondary no-underline f5 Bump-link--hover" data-ga-click="(Logged out) Header, go to Contact Sales">Contact Sales <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                    </ul>

                    <ul class="list-style-none mb-0 border-lg-top pt-lg-3">
                      <li class="edge-item-fix"><a href="https://education.github.com" class="py-2 pb-0 lh-condensed-ultra d-block no-underline Link--primary no-underline h5 Bump-link--hover"  data-ga-click="(Logged out) Header, go to Education">Education <span class="Bump-link-symbol float-right text-normal color-text-tertiary pr-3">&rarr;</span></a></li>
                    </ul>
                  </div>
                </details>
              </li>
          </ul>
        </nav>

      <div class="d-lg-flex flex-items-center px-3 px-lg-0 text-center text-lg-left">
          <div class="d-lg-flex min-width-0 mb-3 mb-lg-0">
            



<div class="header-search flex-auto js-site-search position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3 scoped-search site-scoped-search js-jump-to"
>
  <div class="position-relative">
    <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-site-search-form" role="search" aria-label="Site" data-scope-type="Repository" data-scope-id="74969884" data-scoped-search-url="/TonyGermaneri/canvas-datagrid/search" data-owner-scoped-search-url="/users/TonyGermaneri/search" data-unscoped-search-url="/search" action="/TonyGermaneri/canvas-datagrid/search" accept-charset="UTF-8" method="get">
      <label class="form-control input-sm header-search-wrapper p-0 js-chromeless-input-container header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center">
        <input type="text"
          class="form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
          data-hotkey=s,/
          name="q"
          data-test-selector="nav-search-input"
          placeholder="Search"
          data-unscoped-placeholder="Search GitHub"
          data-scoped-placeholder="Search"
          autocapitalize="off"
          role="combobox"
          aria-haspopup="listbox"
          aria-expanded="false"
          aria-autocomplete="list"
          aria-controls="jump-to-results"
          aria-label="Search"
          data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations"
          spellcheck="false"
          autocomplete="off"
        >
        <input type="hidden" data-csrf="true" class="js-data-jump-to-suggestions-path-csrf" value="C0Z4dByGi4H1MIXk18mi9wpFwqHX0btEgLilIdg7yUinEsMEwQjryw0Bbr5iyv6fqFskPCUCun1CAQSYKvvV/A==" />
        <input type="hidden" class="js-site-search-type-field" name="type" >
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1 header-search-key-slash"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg>


          <div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
            
<ul class="d-none js-jump-to-suggestions-template-container">
  

<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-suggestion" role="option">
  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="" data-item-type="suggestion">
    <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
    </div>

    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">

    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
    </div>

    <div class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
        In this repository
      </span>
      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
        All GitHub
      </span>
      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>

    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
      Jump to
      <span class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>
  </a>
</li>

</ul>

<ul class="d-none js-jump-to-no-results-template-container">
  <li class="d-flex flex-justify-center flex-items-center f5 d-none js-jump-to-suggestion p-2">
    <span class="color-text-secondary">No suggested jump to results</span>
  </li>
</ul>

<ul id="jump-to-results" role="listbox" class="p-0 m-0 js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container">
  

<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-scoped-search d-none" role="option">
  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="" data-item-type="scoped_search">
    <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
    </div>

    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">

    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
    </div>

    <div class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
        In this repository
      </span>
      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
        All GitHub
      </span>
      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>

    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
      Jump to
      <span class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>
  </a>
</li>

  

<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-owner-scoped-search d-none" role="option">
  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="" data-item-type="owner_scoped_search">
    <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
    </div>

    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">

    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
    </div>

    <div class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this user">
        In this user
      </span>
      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
        All GitHub
      </span>
      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>

    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
      Jump to
      <span class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>
  </a>
</li>

  

<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-global-search d-none" role="option">
  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2" href="" data-item-type="global_search">
    <div class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z"></path></svg>
      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
    </div>

    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">

    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
    </div>

    <div class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
        In this repository
      </span>
      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
        All GitHub
      </span>
      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>

    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
      Jump to
      <span class="d-inline-block ml-1 v-align-middle">↵</span>
    </div>
  </a>
</li>


</ul>

          </div>
      </label>
</form>  </div>
</div>

          </div>

        <div class="position-relative mr-3 mb-4 mb-lg-0 d-inline-block">
          <a href="/login?return_to=https%3A%2F%2Fgithub.com%2FTonyGermaneri%2Fcanvas-datagrid"
            class="HeaderMenu-link flex-shrink-0 no-underline"
            data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="818fdebf64f14fcf493c91a5dc9ed21a592459a3795c0ca093877b0d19dee38e"
            data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">
            Sign in
          </a>
        </div>

            <a href="/signup?ref_cta=Sign+up&amp;ref_loc=header+logged+out&amp;ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&amp;source=header-repo&amp;source_repo=TonyGermaneri%2Fcanvas-datagrid"
              class="HeaderMenu-link flex-shrink-0 d-inline-block no-underline border color-border-tertiary rounded px-2 py-1"
              data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="818fdebf64f14fcf493c91a5dc9ed21a592459a3795c0ca093877b0d19dee38e"
              data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Sign up&quot;,&quot;action&quot;:&quot;click to sign up for account&quot;,&quot;label&quot;:&quot;ref_page:/&lt;user-name&gt;/&lt;repo-name&gt;;ref_cta:Sign up;ref_loc:header logged out&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="1e5c30e15038e9cce213a95f0d92ab13a5b264f022b546b950df09a8b17f2df6"
            >
              Sign up
            </a>
      </div>
    </div>
  </div>
</header>

    </div>

  <div id="start-of-content" class="show-on-focus"></div>






    <div data-pjax-replace id="js-flash-container">


  <template class="js-flash-template">
    <div class="flash flash-full  {{ className }}">
  <div class=" px-2" >
    <button class="flash-close js-flash-close" type="button" aria-label="Dismiss this message">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
    <path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>
</svg>
    </button>
    
      <div>{{ message }}</div>

  </div>
</div>
  </template>
</div>


    

  <include-fragment class="js-notification-shelf-include-fragment" data-base-src="https://github.com/notifications/beta/shelf"></include-fragment>





  <div
    class="application-main "
    data-commit-hovercards-enabled
    data-discussion-hovercards-enabled
    data-issue-and-pr-hovercards-enabled
  >
        <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
    <main id="js-repo-pjax-container" data-pjax-container >
      

      




  


  <div id="repository-container-header" class="hx_page-header-bg pt-3 hide-full-screen mb-5" data-pjax-replace>

      <div class="d-flex mb-3 px-3 px-md-4 px-lg-5">

        <div class="flex-auto min-width-0 width-fit mr-3">
            <h1 class=" d-flex flex-wrap flex-items-center break-word f3 text-normal">
    <svg class="octicon octicon-repo color-text-secondary mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
  <span class="author flex-self-stretch" itemprop="author">
    <a class="url fn" rel="author" data-hovercard-type="user" data-hovercard-url="/users/TonyGermaneri/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/TonyGermaneri">TonyGermaneri</a>
  </span>
  <span class="mx-1 flex-self-stretch color-text-secondary">/</span>
  <strong itemprop="name" class="mr-2 flex-self-stretch">
    <a data-pjax="#js-repo-pjax-container" href="/TonyGermaneri/canvas-datagrid">canvas-datagrid</a>
  </strong>
  
</h1>


        </div>

          <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;">

  <li>
      <a class="tooltipped tooltipped-s btn btn-sm" aria-label="You must be signed in to change notification settings" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;notification subscription menu watch&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="2acaffa641a8b06db140b432b12e4e0cdd05110b88091c5da23e39ac0a88e299" href="/login?return_to=%2FTonyGermaneri%2Fcanvas-datagrid">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell">
    <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
</svg>
    Notifications
</a>
  </li>

  <li>
          <a class="btn btn-sm btn-with-count  tooltipped tooltipped-s" aria-label="You must be signed in to star a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;star button&quot;,&quot;repository_id&quot;:74969884,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="6c1522260f2a9e5e8faecc3296dac0302d78ba8ef8b99cbbd458ef11ec4f9632" href="/login?return_to=%2FTonyGermaneri%2Fcanvas-datagrid">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom mr-1">
    <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
</svg>
      <span data-view-component="true">
        Star
</span></a>
    <a class="social-count js-social-count" href="/TonyGermaneri/canvas-datagrid/stargazers"
      aria-label="898 users starred this repository">
      898
    </a>

  </li>

  <li>
        <a class="btn btn-sm btn-with-count tooltipped tooltipped-s" aria-label="You must be signed in to fork a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;repo details fork button&quot;,&quot;repository_id&quot;:74969884,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="edcdf4b4fe0838ab6bb8c95d228b21e79919885e0ae2bc88efe1a9e3452b2ef6" href="/login?return_to=%2FTonyGermaneri%2Fcanvas-datagrid">
          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked">
    <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
</svg>
          Fork
</a>
      <a href="/TonyGermaneri/canvas-datagrid/network/members" class="social-count"
         aria-label="122 users forked this repository">
        122
      </a>
  </li>
</ul>

      </div>

      <div id="responsive-meta-container" data-pjax-replace>
      <div class="d-block d-md-none mb-2 px-3 px-md-4 px-lg-5">
      <p class="f4 mb-3">
        Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
      </p>
      <div class="mb-2">
        <a href="/TonyGermaneri/canvas-datagrid/blob/master/LICENSE" class="Link--muted">
          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-1">
    <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
</svg>
            BSD-3-Clause License
        </a>
      </div>
    <div class="mb-3">
      <a class="Link--secondary no-underline mr-3" href="/TonyGermaneri/canvas-datagrid/stargazers">
        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star mr-1">
    <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
</svg>
        <span class="text-bold">898</span>
        stars
</a>      <a class="Link--secondary no-underline" href="/TonyGermaneri/canvas-datagrid/network/members">
        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-1">
    <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
</svg>
        <span class="text-bold">122</span>
        forks
</a>    </div>
    <div class="d-flex">
      <div class="flex-1 mr-2">
            <a class="btn btn-sm  btn-block tooltipped tooltipped-s" aria-label="You must be signed in to star a repository" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;star button&quot;,&quot;repository_id&quot;:74969884,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="6c1522260f2a9e5e8faecc3296dac0302d78ba8ef8b99cbbd458ef11ec4f9632" href="/login?return_to=%2FTonyGermaneri%2Fcanvas-datagrid">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom mr-1">
    <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
</svg>
      <span data-view-component="true">
        Star
</span></a>

      </div>
      <div class="flex-1">
          <a class="tooltipped tooltipped-s btn btn-sm btn-block" aria-label="You must be signed in to change notification settings" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;notification subscription menu watch&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;LOG_IN&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="2acaffa641a8b06db140b432b12e4e0cdd05110b88091c5da23e39ac0a88e299" href="/login?return_to=%2FTonyGermaneri%2Fcanvas-datagrid">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell">
    <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
</svg>
    Notifications
</a>
      </div>
    </div>
  </div>

</div>


        

  <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5">

    <ul data-view-component="true" class="UnderlineNav-body list-style-none">
        <li data-view-component="true" class="d-flex">
  <a id="code-tab" href="/TonyGermaneri/canvas-datagrid" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments /TonyGermaneri/canvas-datagrid" data-hotkey="g c" data-ga-click="Repository, Navigation click, Code tab" data-pjax="#repo-content-pjax-container" aria-current="page" data-view-component="true" class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected">
    
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline">
    <path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path>
</svg>
          <span data-content="Code">Code</span>
            <span title="Not available" data-view-component="true" class="Counter"></span>

    
</a></li>
        <li data-view-component="true" class="d-flex">
  <a id="issues-tab" href="/TonyGermaneri/canvas-datagrid/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /TonyGermaneri/canvas-datagrid/issues" data-hotkey="g i" data-ga-click="Repository, Navigation click, Issues tab" data-pjax="#repo-content-pjax-container" data-view-component="true" class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
    
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline">
    <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
</svg>
          <span data-content="Issues">Issues</span>
            <span title="77" data-view-component="true" class="Counter">77</span>

    
</a></li>
        <li data-view-component="true" class="d-flex">
  <a id="pull-requests-tab" href="/TonyGermaneri/canvas-datagrid/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /TonyGermaneri/canvas-datagrid/pulls" data-hotkey="g p" data-ga-click="Repository, Navigation click, Pull requests tab" data-pjax="#repo-content-pjax-container" data-view-component="true" class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
    
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline">
    <path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path>
</svg>
          <span data-content="Pull requests">Pull requests</span>
            <span title="3" data-view-component="true" class="Counter">3</span>

    
</a></li>
        <li data-view-component="true" class="d-flex">
  <a id="actions-tab" href="/TonyGermaneri/canvas-datagrid/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /TonyGermaneri/canvas-datagrid/actions" data-hotkey="g a" data-ga-click="Repository, Navigation click, Actions tab" data-pjax="#repo-content-pjax-container" data-view-component="true" class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
    
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline">
    <path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path>
</svg>
          <span data-content="Actions">Actions</span>
            <span title="Not available" data-view-component="true" class="Counter"></span>

    
</a></li>
        <li data-view-component="true" class="d-flex">
  <a id="security-tab" href="/TonyGermaneri/canvas-datagrid/security" data-tab-item="i4security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /TonyGermaneri/canvas-datagrid/security" data-hotkey="g s" data-ga-click="Repository, Navigation click, Security tab" data-view-component="true" class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
    
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline">
    <path fill-rule="evenodd" d="M7.467.133a1.75 1.75 0 011.066 0l5.25 1.68A1.75 1.75 0 0115 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.7 1.7 0 01-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 011.217-1.667l5.25-1.68zm.61 1.429a.25.25 0 00-.153 0l-5.25 1.68a.25.25 0 00-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.2.2 0 00.154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.25.25 0 00-.174-.237l-5.25-1.68zM9 10.5a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.75a.75.75 0 10-1.5 0v3a.75.75 0 001.5 0v-3z"></path>
</svg>
          <span data-content="Security">Security</span>
            <include-fragment src="/TonyGermaneri/canvas-datagrid/security/overall-count" accept="text/fragment+html"></include-fragment>

    
</a></li>
        <li data-view-component="true" class="d-flex">
  <a id="insights-tab" href="/TonyGermaneri/canvas-datagrid/pulse" data-tab-item="i5insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /TonyGermaneri/canvas-datagrid/pulse" data-ga-click="Repository, Navigation click, Insights tab" data-view-component="true" class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item">
    
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline">
    <path fill-rule="evenodd" d="M1.5 1.75a.75.75 0 00-1.5 0v12.5c0 .414.336.75.75.75h14.5a.75.75 0 000-1.5H1.5V1.75zm14.28 2.53a.75.75 0 00-1.06-1.06L10 7.94 7.53 5.47a.75.75 0 00-1.06 0L3.22 8.72a.75.75 0 001.06 1.06L7 7.06l2.47 2.47a.75.75 0 001.06 0l5.25-5.25z"></path>
</svg>
          <span data-content="Insights">Insights</span>
            <span title="Not available" data-view-component="true" class="Counter"></span>

    
</a></li>
</ul>
      <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions  js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0">      <details data-view-component="true" class="details-overlay details-reset position-relative">
  <summary role="button" data-view-component="true">          <div class="UnderlineNav-item mr-0 border-0">
            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal">
    <path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>
            <span class="sr-only">More</span>
          </div>
</summary>
  <div data-view-component="true">          <details-menu role="menu" data-view-component="true" class="dropdown-menu dropdown-menu-sw">
  
            <ul>
                <li data-menu-item="i0code-tab" hidden>
                  <a role="menuitem" class="js-selected-navigation-item selected dropdown-item" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments /TonyGermaneri/canvas-datagrid" href="/TonyGermaneri/canvas-datagrid">
                    Code
</a>                </li>
                <li data-menu-item="i1issues-tab" hidden>
                  <a role="menuitem" class="js-selected-navigation-item dropdown-item" data-selected-links="repo_issues repo_labels repo_milestones /TonyGermaneri/canvas-datagrid/issues" href="/TonyGermaneri/canvas-datagrid/issues">
                    Issues
</a>                </li>
                <li data-menu-item="i2pull-requests-tab" hidden>
                  <a role="menuitem" class="js-selected-navigation-item dropdown-item" data-selected-links="repo_pulls checks /TonyGermaneri/canvas-datagrid/pulls" href="/TonyGermaneri/canvas-datagrid/pulls">
                    Pull requests
</a>                </li>
                <li data-menu-item="i3actions-tab" hidden>
                  <a role="menuitem" class="js-selected-navigation-item dropdown-item" data-selected-links="repo_actions /TonyGermaneri/canvas-datagrid/actions" href="/TonyGermaneri/canvas-datagrid/actions">
                    Actions
</a>                </li>
                <li data-menu-item="i4security-tab" hidden>
                  <a role="menuitem" class="js-selected-navigation-item dropdown-item" data-selected-links="security overview alerts policy token_scanning code_scanning /TonyGermaneri/canvas-datagrid/security" href="/TonyGermaneri/canvas-datagrid/security">
                    Security
</a>                </li>
                <li data-menu-item="i5insights-tab" hidden>
                  <a role="menuitem" class="js-selected-navigation-item dropdown-item" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /TonyGermaneri/canvas-datagrid/pulse" href="/TonyGermaneri/canvas-datagrid/pulse">
                    Insights
</a>                </li>
            </ul>

</details-menu></div>
</details></div>
</nav>

  </div>



<div class="clearfix new-discussion-timeline container-xl px-3 px-md-4 px-lg-5">
  <div id="repo-content-pjax-container" class="repository-content " >

    


    
      
    <div>
  <div class="d-none d-lg-block mt-6 mr-3 Popover top-0 right-0 color-shadow-medium col-3">
    
  </div>

  <div data-view-component="true" class="gutter-condensed gutter-lg flex-column flex-md-row d-flex">

  <div data-view-component="true" class="flex-shrink-0 col-12 col-md-9 mb-4 mb-md-0">      
      <div class="file-navigation mb-3 d-flex flex-items-start">
  
<div class="position-relative">
  <details class="details-reset details-overlay mr-0 mb-0 " id="branch-select-menu">
    <summary class="btn css-truncate"
            data-hotkey="w"
            title="Switch branches or tags">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch">
    <path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path>
</svg>
      <span class="css-truncate-target" data-menu-button>master</span>
      <span class="dropdown-caret"></span>
    </summary>

      
<div class="SelectMenu">
  <div class="SelectMenu-modal">
    <header class="SelectMenu-header">
      <span class="SelectMenu-title">Switch branches/tags</span>
      <button class="SelectMenu-closeButton" type="button" data-toggle-for="branch-select-menu"><svg aria-label="Close menu" aria-hidden="false" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
    <path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>
</svg></button>
    </header>

    <input-demux data-action="tab-container-change:input-demux#storeInput tab-container-changed:input-demux#updateInput">
      <tab-container class="d-flex flex-column js-branches-tags-tabs" style="min-height: 0;">
        <div class="SelectMenu-filter">
          <input data-target="input-demux.source"
                 id="context-commitish-filter-field"
                 class="SelectMenu-input form-control"
                 aria-owns="ref-list-branches"
                 data-controls-ref-menu-id="ref-list-branches"
                 autofocus
                 autocomplete="off"
                 aria-label="Filter branches/tags"
                 placeholder="Filter branches/tags"
                 type="text"
          >
        </div>

        <div class="SelectMenu-tabs" role="tablist" data-target="input-demux.control" >
          <button class="SelectMenu-tab" type="button" role="tab" aria-selected="true">Branches</button>
          <button class="SelectMenu-tab" type="button" role="tab">Tags</button>
        </div>

        <div role="tabpanel" id="ref-list-branches" data-filter-placeholder="Filter branches/tags" class="d-flex flex-column flex-auto overflow-auto" tabindex="">
          <ref-selector
            type="branch"
            data-targets="input-demux.sinks"
            data-action="
              input-entered:ref-selector#inputEntered
              tab-selected:ref-selector#tabSelected
              focus-list:ref-selector#focusFirstListMember
            "
            query-endpoint="/TonyGermaneri/canvas-datagrid/refs"
            
            cache-key="v0:1630315587.667418"
            current-committish="bWFzdGVy"
            default-branch="bWFzdGVy"
            name-with-owner="VG9ueUdlcm1hbmVyaS9jYW52YXMtZGF0YWdyaWQ="
            prefetch-on-mouseover
          >

            <template data-target="ref-selector.fetchFailedTemplate">
              <div class="SelectMenu-message" data-index="{{ index }}">Could not load branches</div>
            </template>

              <template data-target="ref-selector.noMatchTemplate">
    <div class="SelectMenu-message">Nothing to show</div>
</template>


            <!-- TODO: this max-height is necessary or else the branch list won't scroll.  why? -->
            <div data-target="ref-selector.listContainer" role="menu" class="SelectMenu-list " style="max-height: 330px" data-pjax="#repo-content-pjax-container">
              <div class="SelectMenu-loading pt-3 pb-0" aria-label="Menu is loading">
                <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" data-view-component="true" class="anim-rotate">
  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
              </div>
            </div>

              <template data-target="ref-selector.itemTemplate">
  <a href="https://github.com/TonyGermaneri/canvas-datagrid/tree/{{ urlEncodedRefName }}" class="SelectMenu-item" role="menuitemradio" rel="nofollow" aria-checked="{{ isCurrent }}" data-index="{{ index }}">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check SelectMenu-icon SelectMenu-icon--check">
    <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg>
    <span class="flex-1 css-truncate css-truncate-overflow {{ isFilteringClass }}">{{ refName }}</span>
    <span hidden="{{ isNotDefault }}" class="Label Label--secondary flex-self-start">default</span>
  </a>
</template>


              <footer class="SelectMenu-footer"><a href="/TonyGermaneri/canvas-datagrid/branches">View all branches</a></footer>
          </ref-selector>

        </div>

        <div role="tabpanel" id="tags-menu" data-filter-placeholder="Find a tag" class="d-flex flex-column flex-auto overflow-auto" tabindex="" hidden>
          <ref-selector
            type="tag"
            data-action="
              input-entered:ref-selector#inputEntered
              tab-selected:ref-selector#tabSelected
              focus-list:ref-selector#focusFirstListMember
            "
            data-targets="input-demux.sinks"
            query-endpoint="/TonyGermaneri/canvas-datagrid/refs"
            cache-key="v0:1630315587.667418"
            current-committish="bWFzdGVy"
            default-branch="bWFzdGVy"
            name-with-owner="VG9ueUdlcm1hbmVyaS9jYW52YXMtZGF0YWdyaWQ="
          >

            <template data-target="ref-selector.fetchFailedTemplate">
              <div class="SelectMenu-message" data-index="{{ index }}">Could not load tags</div>
            </template>

            <template data-target="ref-selector.noMatchTemplate">
              <div class="SelectMenu-message" data-index="{{ index }}">Nothing to show</div>
            </template>

              <template data-target="ref-selector.itemTemplate">
  <a href="https://github.com/TonyGermaneri/canvas-datagrid/tree/{{ urlEncodedRefName }}" class="SelectMenu-item" role="menuitemradio" rel="nofollow" aria-checked="{{ isCurrent }}" data-index="{{ index }}">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check SelectMenu-icon SelectMenu-icon--check">
    <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg>
    <span class="flex-1 css-truncate css-truncate-overflow {{ isFilteringClass }}">{{ refName }}</span>
    <span hidden="{{ isNotDefault }}" class="Label Label--secondary flex-self-start">default</span>
  </a>
</template>


            <div data-target="ref-selector.listContainer" role="menu" class="SelectMenu-list" style="max-height: 330px" data-pjax="#repo-content-pjax-container">
              <div class="SelectMenu-loading pt-3 pb-0" aria-label="Menu is loading">
                <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" data-view-component="true" class="anim-rotate">
  <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
              </div>
            </div>
              <footer class="SelectMenu-footer"><a href="/TonyGermaneri/canvas-datagrid/tags">View all tags</a></footer>
          </ref-selector>
        </div>
      </tab-container>
    </input-demux>
  </div>
</div>

  </details>

</div>


  <div class="flex-self-center ml-3 flex-self-stretch d-none d-lg-flex flex-items-center lh-condensed-ultra">
    <a data-pjax href="/TonyGermaneri/canvas-datagrid/branches" class="Link--primary no-underline">
          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch">
    <path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path>
</svg>
          <strong>14</strong>
          <span class="color-text-tertiary">branches</span>
    </a>
    <a data-pjax href="/TonyGermaneri/canvas-datagrid/tags" class="ml-3 Link--primary no-underline">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag">
    <path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path>
</svg>
        <strong>216</strong>
        <span class="color-text-tertiary">tags</span>
    </a>
  </div>

  <div class="flex-auto"></div>

  <include-fragment data-test-selector="overview-actions-fragment" src="/TonyGermaneri/canvas-datagrid/overview_actions/master"></include-fragment>


    <span class="d-none d-md-flex ml-2">

      
<get-repo class="">
    
    <details class="position-relative details-overlay details-reset"
             data-action="toggle:get-repo#onDetailsToggle"
             
    >
      <summary class="btn btn-primary" data-hydro-click="{&quot;event_type&quot;:&quot;repository.click&quot;,&quot;payload&quot;:{&quot;repository_id&quot;:74969884,&quot;target&quot;:&quot;CLONE_OR_DOWNLOAD_BUTTON&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="f61e93d32575a908abdbdaf93d8523b8ecc56ea7ca5c1b3318a770803a072d09">
        Code
        <span class="dropdown-caret"></span>
</summary>      <div class="position-relative">
        <div class="dropdown-menu dropdown-menu-sw p-0" style="top:6px;width:378px;">
          <div data-target="get-repo.modal">
              <ul class="list-style-none">
                  <li class="Box-row p-3">
  <a class="Link--muted float-right tooltipped tooltipped-s" href="https://docs.github.com/articles/which-remote-url-should-i-use" target="_blank" aria-label="Which remote URL should I use?">
  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-question">
    <path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zM6.92 6.085c.081-.16.19-.299.34-.398.145-.097.371-.187.74-.187.28 0 .553.087.738.225A.613.613 0 019 6.25c0 .177-.04.264-.077.318a.956.956 0 01-.277.245c-.076.051-.158.1-.258.161l-.007.004a7.728 7.728 0 00-.313.195 2.416 2.416 0 00-.692.661.75.75 0 001.248.832.956.956 0 01.276-.245 6.3 6.3 0 01.26-.16l.006-.004c.093-.057.204-.123.313-.195.222-.149.487-.355.692-.662.214-.32.329-.702.329-1.15 0-.76-.36-1.348-.863-1.725A2.76 2.76 0 008 4c-.631 0-1.155.16-1.572.438-.413.276-.68.638-.849.977a.75.75 0 101.342.67z"></path>
</svg>
</a>

<div class="text-bold">
  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-terminal mr-2">
    <path fill-rule="evenodd" d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 11-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z"></path>
</svg>
  Clone
</div>

<tab-container>

  <div class="UnderlineNav my-2 box-shadow-none">
    <div class="UnderlineNav-body" role="tablist">
          <button name="button" type="button" role="tab" class="UnderlineNav-item lh-default f6 py-0 px-0 mr-2 position-relative" aria-selected="true" data-hydro-click="{&quot;event_type&quot;:&quot;clone_or_download.click&quot;,&quot;payload&quot;:{&quot;feature_clicked&quot;:&quot;USE_HTTPS&quot;,&quot;git_repository_type&quot;:&quot;REPOSITORY&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="339e6b87f48e0082777f1299318afe2daaa8862c1537f2b7aa787802899137f3">
            HTTPS
</button>          <button name="button" type="button" role="tab" class="UnderlineNav-item lh-default f6 py-0 px-0 mr-2 position-relative" data-hydro-click="{&quot;event_type&quot;:&quot;clone_or_download.click&quot;,&quot;payload&quot;:{&quot;feature_clicked&quot;:&quot;USE_GH_CLI&quot;,&quot;git_repository_type&quot;:&quot;REPOSITORY&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="8446cdc69e591f5bf3f84faaf07a8be1858aac49df814612e5c109446b54232e">
            GitHub CLI
</button>    </div>
  </div>

  <div role="tabpanel">
    <div class="input-group">
  <input type="text" class="form-control input-monospace input-sm color-bg-secondary" data-autoselect value="https://github.com/TonyGermaneri/canvas-datagrid.git" aria-label="https://github.com/TonyGermaneri/canvas-datagrid.git" readonly>
  <div class="input-group-button">
    <clipboard-copy value="https://github.com/TonyGermaneri/canvas-datagrid.git" aria-label="Copy to clipboard" class="btn btn-sm js-clipboard-copy tooltipped-no-delay ClipboardButton" data-copy-feedback="Copied!" data-tooltip-direction="n" data-hydro-click="{&quot;event_type&quot;:&quot;clone_or_download.click&quot;,&quot;payload&quot;:{&quot;feature_clicked&quot;:&quot;COPY_URL&quot;,&quot;git_repository_type&quot;:&quot;REPOSITORY&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="f11072817ed1f9a353dc5e5742a47aa83267266e970e04fb17331ef13f6614d0"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-paste js-clipboard-clippy-icon d-inline-block">
    <path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path>
</svg><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-text-success d-inline-block d-sm-none">
    <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg></clipboard-copy>
  </div>
</div>

    <p class="mt-2 mb-0 f6 color-text-secondary">
        Use Git or checkout with SVN using the web URL.
    </p>
  </div>


  <div role="tabpanel" hidden>
    <div class="input-group">
  <input type="text" class="form-control input-monospace input-sm color-bg-secondary" data-autoselect value="gh repo clone TonyGermaneri/canvas-datagrid" aria-label="gh repo clone TonyGermaneri/canvas-datagrid" readonly>
  <div class="input-group-button">
    <clipboard-copy value="gh repo clone TonyGermaneri/canvas-datagrid" aria-label="Copy to clipboard" class="btn btn-sm js-clipboard-copy tooltipped-no-delay ClipboardButton" data-copy-feedback="Copied!" data-tooltip-direction="n" data-hydro-click="{&quot;event_type&quot;:&quot;clone_or_download.click&quot;,&quot;payload&quot;:{&quot;feature_clicked&quot;:&quot;COPY_URL&quot;,&quot;git_repository_type&quot;:&quot;REPOSITORY&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="f11072817ed1f9a353dc5e5742a47aa83267266e970e04fb17331ef13f6614d0"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-paste js-clipboard-clippy-icon d-inline-block">
    <path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path>
</svg><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-text-success d-inline-block d-sm-none">
    <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg></clipboard-copy>
  </div>
</div>

    <p class="mt-2 mb-0 f6 color-text-secondary">
      Work fast with our official CLI.
      <a href="https://cli.github.com" target="_blank">Learn more</a>.
    </p>
  </div>
</tab-container>

</li>
<li data-platforms="windows,mac" class="Box-row Box-row--hover-gray p-3 mt-0 rounded-0 js-remove-unless-platform">
  <a class="d-flex flex-items-center color-text-primary text-bold no-underline" data-hydro-click="{&quot;event_type&quot;:&quot;clone_or_download.click&quot;,&quot;payload&quot;:{&quot;feature_clicked&quot;:&quot;OPEN_IN_DESKTOP&quot;,&quot;git_repository_type&quot;:&quot;REPOSITORY&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="f13e5239b066a6c12ad5ced929cb9704a7a2aa28d564092e90fd085135dad4cf" data-action="click:get-repo#showDownloadMessage" href="https://desktop.github.com">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-desktop-download mr-2">
    <path d="M4.927 5.427l2.896 2.896a.25.25 0 00.354 0l2.896-2.896A.25.25 0 0010.896 5H8.75V.75a.75.75 0 10-1.5 0V5H5.104a.25.25 0 00-.177.427z"></path><path d="M1.573 2.573a.25.25 0 00-.073.177v7.5a.25.25 0 00.25.25h12.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-3a.75.75 0 110-1.5h3A1.75 1.75 0 0116 2.75v7.5A1.75 1.75 0 0114.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.75.75 0 0111.25 16h-6.5a.75.75 0 01-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 010 10.25v-7.5A1.75 1.75 0 011.75 1h3a.75.75 0 010 1.5h-3a.25.25 0 00-.177.073zM6.982 12a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5H6.982z"></path>
</svg>
    Open with GitHub Desktop
</a></li>
<li class="Box-row Box-row--hover-gray p-3 mt-0">
  <a class="d-flex flex-items-center color-text-primary text-bold no-underline" rel="nofollow" data-hydro-click="{&quot;event_type&quot;:&quot;clone_or_download.click&quot;,&quot;payload&quot;:{&quot;feature_clicked&quot;:&quot;DOWNLOAD_ZIP&quot;,&quot;git_repository_type&quot;:&quot;REPOSITORY&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="5cedfde46ead470063c26a77fc270977a4b035f37b2132018adb315f16e30266" data-ga-click="Repository, download zip, location:repo overview" data-open-app="link" href="/TonyGermaneri/canvas-datagrid/archive/refs/heads/master.zip">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-zip mr-2">
    <path fill-rule="evenodd" d="M3.5 1.75a.25.25 0 01.25-.25h3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h2.086a.25.25 0 01.177.073l2.914 2.914a.25.25 0 01.073.177v8.586a.25.25 0 01-.25.25h-.5a.75.75 0 000 1.5h.5A1.75 1.75 0 0014 13.25V4.664c0-.464-.184-.909-.513-1.237L10.573.513A1.75 1.75 0 009.336 0H3.75A1.75 1.75 0 002 1.75v11.5c0 .649.353 1.214.874 1.515a.75.75 0 10.752-1.298.25.25 0 01-.126-.217V1.75zM8.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM6 5.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5A.75.75 0 016 5.25zm2 1.5A.75.75 0 018.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 6.75zm-1.25.75a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM8 9.75A.75.75 0 018.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 9.75zm-.75.75a1.75 1.75 0 00-1.75 1.75v3c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-3a1.75 1.75 0 00-1.75-1.75h-.5zM7 12.25a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v2.25H7v-2.25z"></path>
</svg>
    Download ZIP
</a></li>

              </ul>
          </div>


          <div class="p-3" data-targets="get-repo.platforms" data-platform="mac" hidden>
            <h4 class="lh-condensed mb-3">Launching GitHub Desktop<span class="AnimatedEllipsis"></span></h4>
            <p class="color-text-secondary">If nothing happens, <a href="https://desktop.github.com/">download GitHub Desktop</a> and try again.</p>
            <button data-action="click:get-repo#onDetailsToggle" type="button" data-view-component="true" class="btn-link">
  
  
              Go back

  

</button>          </div>
          <div class="p-3" data-targets="get-repo.platforms" data-platform="windows" hidden>
            <h4 class="lh-condensed mb-3">Launching GitHub Desktop<span class="AnimatedEllipsis"></span></h4>
            <p class="color-text-secondary">If nothing happens, <a href="https://desktop.github.com/">download GitHub Desktop</a> and try again.</p>
            <button data-action="click:get-repo#onDetailsToggle" type="button" data-view-component="true" class="btn-link">
  
  
              Go back

  

</button>          </div>
          <div class="p-3" data-targets="get-repo.platforms" data-platform="xcode" hidden>
            <h4 class="lh-condensed mb-3">Launching Xcode<span class="AnimatedEllipsis"></span></h4>
            <p class="color-text-secondary">If nothing happens, <a href="https://developer.apple.com/xcode/">download Xcode</a> and try again.</p>
            <button data-action="click:get-repo#onDetailsToggle" type="button" data-view-component="true" class="btn-link">
  
  
              Go back

  

</button>          </div>
          <div class="p-3 " data-targets="get-repo.platforms" data-target="new-codespace.loadingVscode prefetch-pane.loadingVscode" data-platform="vscode" hidden>
  <poll-include-fragment data-target="get-repo.vscodePoller new-codespace.vscodePoller prefetch-pane.vscodePoller">
    <h4 class="lh-condensed mb-3">Launching Visual Studio Code<span class="AnimatedEllipsis" data-hide-on-error></span></h4>
    <p class="color-text-secondary" data-hide-on-error>Your codespace will open once ready.</p>
    <p class="color-text-secondary" data-show-on-error hidden>There was a problem preparing your codespace, please try again.</p>
  </poll-include-fragment>
</div>

        </div>
      </div>
    </details>

</get-repo>


      

      
    </span>
</div>

      


<div class="Box mb-3">
  <div class="Box-header hx_commit-tease position-relative">
    <h2 class="sr-only">Latest commit</h2>
    <div class="js-details-container Details d-flex rounded-top-1 flex-items-center flex-wrap" data-issue-and-pr-hovercards-enabled>
      <include-fragment src="/TonyGermaneri/canvas-datagrid/tree-commit/bcd959407848889c5aefeb61b03a5e1e998e458c" class="d-flex flex-auto flex-items-center" aria-busy="true" aria-label="Loading latest commit">
        <div class="Skeleton avatar avatar-user flex-shrink-0 ml-n1 mr-n1 mt-n1 mb-n1" style="width:24px;height:24px;"></div>
        <div class="Skeleton Skeleton--text col-5 ml-3">&nbsp;</div>
</include-fragment>      <div class="flex-shrink-0">
        <h2 class="sr-only">Git stats</h2>
        <ul class="list-style-none d-flex">
          <li class="ml-0 ml-md-3">
            <a data-pjax href="/TonyGermaneri/canvas-datagrid/commits/master" class="pl-3 pr-3 py-3 p-md-0 mt-n3 mb-n3 mr-n3 m-md-0 Link--primary no-underline no-wrap">
              <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history">
    <path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"></path>
</svg>
              <span class="d-none d-sm-inline">
                    <strong>810</strong>
                    <span aria-label="Commits on master" class="color-text-secondary d-none d-lg-inline">
                      commits
                    </span>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <h2 id="files"  class="sr-only">Files</h2>
  


    <a class="d-none js-permalink-shortcut" data-hotkey="y" href="/TonyGermaneri/canvas-datagrid/tree/bcd959407848889c5aefeb61b03a5e1e998e458c">Permalink</a>

  <div data-view-component="true" class="include-fragment-error flash flash-error flash-full py-2">
  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
    <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
</svg>
  
    Failed to load latest commit information.


  
</div>  <div class="js-details-container Details">
    <div role="grid" aria-labelledby="files" class="Details-content--hidden-not-important js-navigation-container js-active-navigation-container d-md-block" data-pjax>
      <div class="sr-only" role="row">
        <div role="columnheader">Type</div>
        <div role="columnheader">Name</div>
        <div role="columnheader" class="d-none d-md-block">Latest commit message</div>
        <div role="columnheader">Commit time</div>
      </div>

        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="Directory" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-directory hx_color-icon-directory">
    <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".github" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/tree/master/.github">.github</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Fix types file generation" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/40dbed16fb099c91c2cc3cc22f3285dc82ee65e7">Fix types file generation</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-02-05T22:32:39Z" data-view-component="true" class="no-wrap">Feb 5, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="Directory" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-directory hx_color-icon-directory">
    <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="images" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/tree/master/images">images</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Fix docs: include canvas-datagrid.debug.js and image" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/d3f84fa98e09c60bef8dd0101f6e1b1efc432e27">Fix docs: include canvas-datagrid.debug.js and image</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-07-28T21:35:16Z" data-view-component="true" class="no-wrap">Jul 28, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="Directory" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-directory hx_color-icon-directory">
    <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="lib" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/tree/master/lib">lib</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Paste event updates correct rows in `originalData`" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/105aa26d8177b0ef12426abb73ac11f9fe8a2294">Paste event updates correct rows in <code>originalData</code></a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-08-19T11:52:08Z" data-view-component="true" class="no-wrap">Aug 19, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="Directory" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-directory hx_color-icon-directory">
    <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="test" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/tree/master/test">test</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Split original source data from viewed data (#334)

* Add chai assertion library to tests

* Rename applyFilter -&gt; applyFilters

* Add property boundData as alias for originalData

* Add property viewData as alias for data

viewData reflects the data that's painted on screen, after filtering and sorting and any other operations have been applied to the original data.

* Read from viewData instead of data for tests

* Use viewData when touch-selecting area

* Rename applyDataTransforms -&gt; refresh

* Move `refreshFromOrigialData` into `refresh` method

Method is only called once, and does not seem to much beyond copy an array.

* Remove unused data declaration

* Use viewData to draw, in context menu

Tests are passing, but that's only because self.data is stil being assigned in .refresh(). Once we remove that, a bunch of tests in events.js will fail. Tackling that in another commit.

* Mark self.data locations (to investigate)

* Improve findRowScrollTop RangeError

* Use `viewData` in `self.resize()`

* Alter originalData when calling insertColumn

* Refactor getSelectedData to use viewData

Renamed variables for clarity

* Base createRowOrders on originalData instead of viewData

... because viewData maybe filtered and thus shorter

* Only create tempSchema is originalData is empty

* Delete column from originalData

* Compare against viewData in endEdit, not data

* self.scroll refers to viewData instead of self.data

* Use viewData where appropriate

* Ensure all tests are run

For some reason, removing the self.data assignment fails tests in such a way that they are not reported as failed, but simply causing them to be skipped silently.

* Add devServer

* Rename variables for clarity

* Stop setting self.data in refresh(), update comments

* Use originalData in self.rowOrder()

* Rename data -&gt; viewData in draw()

* Rename d -&gt; rowIndex

* Rename r -&gt; rowOrderIndex

* Rename d -&gt; rowData

* Rename rd -&gt; rowData

* Clean up drawRowHeader

* Rename n -&gt; rowOrderIndex

* Rename variables

s -&gt; schema
o -&gt; columnOrderIndex
i -&gt; headerIndex

* Rename n -&gt; rowOrderIndex

* Rename i -&gt; headerIndex

* Rename o -&gt; columnOrderIndex

* Add viewRowIndex/viewColumnIndex to cell

* Add failing tests for viewRowIndex/viewColumnIndex

* Revise failing tests, add `getBoundRowIndexFromViewRowIndex` method

* Rename getBoundRowIndex -&gt; getBoundRowIndexFromViewRowIndex

* Turn the other tests back on

* Calculate viewData based on filters and sorting

Because filtering and sorting changes the view row index, we need to calculate a mapping from viewRowIndex to boundRowIndex (i.e. position in original data array) each time we apply filters or sort.

This commit renames applyFilters, and the new function includes both filtering and sorting to make sure the view index to original index mapping remains correct. We could have split this up into two distinct steps, filtering and sorting, but it would have meant some code duplication for generating the row index mapping, and I'm doubtful it would serve much purpose, as self.orderings.sort() was only called in refresh anyway.

* Call refresh() when re-ordering column

* Fix beforeEndEdit event

* Fix pasteData to alter originalData

* Serve tutorials in development mode

* Add hasActiveFilters method

* Render actual row numbers when filtering

Instead of simply rendering the viewed row index, this commit renders the row numbers as they appear in the original data array." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/2b3947c482a7c565c4e0c1a4ce66fbd92382040f">Split original source data from viewed data (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="765727803" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/334" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/334/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/334">#334</a><a data-pjax="true" title="Split original source data from viewed data (#334)

* Add chai assertion library to tests

* Rename applyFilter -&gt; applyFilters

* Add property boundData as alias for originalData

* Add property viewData as alias for data

viewData reflects the data that's painted on screen, after filtering and sorting and any other operations have been applied to the original data.

* Read from viewData instead of data for tests

* Use viewData when touch-selecting area

* Rename applyDataTransforms -&gt; refresh

* Move `refreshFromOrigialData` into `refresh` method

Method is only called once, and does not seem to much beyond copy an array.

* Remove unused data declaration

* Use viewData to draw, in context menu

Tests are passing, but that's only because self.data is stil being assigned in .refresh(). Once we remove that, a bunch of tests in events.js will fail. Tackling that in another commit.

* Mark self.data locations (to investigate)

* Improve findRowScrollTop RangeError

* Use `viewData` in `self.resize()`

* Alter originalData when calling insertColumn

* Refactor getSelectedData to use viewData

Renamed variables for clarity

* Base createRowOrders on originalData instead of viewData

... because viewData maybe filtered and thus shorter

* Only create tempSchema is originalData is empty

* Delete column from originalData

* Compare against viewData in endEdit, not data

* self.scroll refers to viewData instead of self.data

* Use viewData where appropriate

* Ensure all tests are run

For some reason, removing the self.data assignment fails tests in such a way that they are not reported as failed, but simply causing them to be skipped silently.

* Add devServer

* Rename variables for clarity

* Stop setting self.data in refresh(), update comments

* Use originalData in self.rowOrder()

* Rename data -&gt; viewData in draw()

* Rename d -&gt; rowIndex

* Rename r -&gt; rowOrderIndex

* Rename d -&gt; rowData

* Rename rd -&gt; rowData

* Clean up drawRowHeader

* Rename n -&gt; rowOrderIndex

* Rename variables

s -&gt; schema
o -&gt; columnOrderIndex
i -&gt; headerIndex

* Rename n -&gt; rowOrderIndex

* Rename i -&gt; headerIndex

* Rename o -&gt; columnOrderIndex

* Add viewRowIndex/viewColumnIndex to cell

* Add failing tests for viewRowIndex/viewColumnIndex

* Revise failing tests, add `getBoundRowIndexFromViewRowIndex` method

* Rename getBoundRowIndex -&gt; getBoundRowIndexFromViewRowIndex

* Turn the other tests back on

* Calculate viewData based on filters and sorting

Because filtering and sorting changes the view row index, we need to calculate a mapping from viewRowIndex to boundRowIndex (i.e. position in original data array) each time we apply filters or sort.

This commit renames applyFilters, and the new function includes both filtering and sorting to make sure the view index to original index mapping remains correct. We could have split this up into two distinct steps, filtering and sorting, but it would have meant some code duplication for generating the row index mapping, and I'm doubtful it would serve much purpose, as self.orderings.sort() was only called in refresh anyway.

* Call refresh() when re-ordering column

* Fix beforeEndEdit event

* Fix pasteData to alter originalData

* Serve tutorials in development mode

* Add hasActiveFilters method

* Render actual row numbers when filtering

Instead of simply rendering the viewed row index, this commit renders the row numbers as they appear in the original data array." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/2b3947c482a7c565c4e0c1a4ce66fbd92382040f">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-02-01T12:59:44Z" data-view-component="true" class="no-wrap">Feb 1, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="Directory" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-directory hx_color-icon-directory">
    <path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="tutorials" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/tree/master/tutorials">tutorials</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Update docs to point to canvas-datagrid.js.org" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/8b8b1874bc0660772d2a609fe63dfd1a19b28493">Update docs to point to canvas-datagrid.js.org</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-09-22T16:04:33Z" data-view-component="true" class="no-wrap">Sep 22, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".babelrc" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/.babelrc">.babelrc</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Type to enter text (#299)

* Remove extraneous trailing comma (not ES5)

* Replace use of `keyCode` with `key`

* Simplify build config

Configure Babel transpiling to ES5
Update GitHub actions for new package.json config
Use webpack.config.js for build config

* Allow Excel-style typing to start editing cell value

* Allow navigating to another cell while editing

* Move to cell in next row upon hitting enter key

* Remove test for space to select: space now enters edit mode

* Do not enter edit mode when ctrl/meta key is also pressed

* Fix tests assuming spacebar selects" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/a4ac2f6b19bb7e87c0730db05c2d516360c6595b">Type to enter text (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="698037289" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/299" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/299/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/299">#299</a><a data-pjax="true" title="Type to enter text (#299)

* Remove extraneous trailing comma (not ES5)

* Replace use of `keyCode` with `key`

* Simplify build config

Configure Babel transpiling to ES5
Update GitHub actions for new package.json config
Use webpack.config.js for build config

* Allow Excel-style typing to start editing cell value

* Allow navigating to another cell while editing

* Move to cell in next row upon hitting enter key

* Remove test for space to select: space now enters edit mode

* Do not enter edit mode when ctrl/meta key is also pressed

* Fix tests assuming spacebar selects" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/a4ac2f6b19bb7e87c0730db05c2d516360c6595b">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-09-14T20:02:15Z" data-view-component="true" class="no-wrap">Sep 14, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".eslintignore" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/.eslintignore">.eslintignore</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Add linting compatible with prettier output" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/a015389477911d65cbac3a892304aaf5597aa023">Add linting compatible with prettier output</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-09-30T19:20:24Z" data-view-component="true" class="no-wrap">Sep 30, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".eslintrc" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/.eslintrc">.eslintrc</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Add types definition (#333)

* Added ESModule Distribution

* Fixed window property substitution

* fixing artifacts from old branch

* Merge remote-tracking branch 'upstream/master'

* added jsdoc &gt; .d.ts

* Fix indentation

* Replace .vscode with eslint:indent

Co-authored-by: Jona Andersen &lt;jona@ndrsn.org&gt;" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/b29115cd728be6e2b29c3165e3afbb967e66ebb4">Add types definition (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="762490651" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/333" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/333/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/333">#333</a><a data-pjax="true" title="Add types definition (#333)

* Added ESModule Distribution

* Fixed window property substitution

* fixing artifacts from old branch

* Merge remote-tracking branch 'upstream/master'

* added jsdoc &gt; .d.ts

* Fix indentation

* Replace .vscode with eslint:indent

Co-authored-by: Jona Andersen &lt;jona@ndrsn.org&gt;" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/b29115cd728be6e2b29c3165e3afbb967e66ebb4">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-02-01T13:12:19Z" data-view-component="true" class="no-wrap">Feb 1, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".gitignore" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/.gitignore">.gitignore</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Add workflows for testing / releasing" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/eb3f2cbe44f8046291032d5ffcb270bd9573d7dd">Add workflows for testing / releasing</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-07-23T01:19:44Z" data-view-component="true" class="no-wrap">Jul 23, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".lintstagedrc" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/.lintstagedrc">.lintstagedrc</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Fix lint-staged config" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/410661b9bbeee190d0040c05288f27153c863369">Fix lint-staged config</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-09-30T21:54:56Z" data-view-component="true" class="no-wrap">Sep 30, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".npmrc" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/.npmrc">.npmrc</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="updated package number.  Sorry its been a long time since I published this." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/2a4af7b3b99387510f36ff3e158a570e6b73ade4">updated package number. Sorry its been a long time since I published …</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-08-16T15:11:54Z" data-view-component="true" class="no-wrap">Aug 16, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title=".prettierrc" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/.prettierrc">.prettierrc</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Add prettier format configuration" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/d905ba035517b810c8406ee4d7ee3e0dc65bee4d">Add prettier format configuration</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-09-30T17:53:24Z" data-view-component="true" class="no-wrap">Sep 30, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="CHANGELOG.md" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/CHANGELOG.md">CHANGELOG.md</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Release v0.3.7" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/bcd959407848889c5aefeb61b03a5e1e998e458c">Release v0.3.7</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-08-30T09:26:07Z" data-view-component="true" class="no-wrap">Aug 30, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="LICENSE" data-pjax="#repo-content-pjax-container" itemprop="license" href="/TonyGermaneri/canvas-datagrid/blob/master/LICENSE">LICENSE</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Updated docs/sample.  Better error handling for a few public methods. Added license file." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/4f7883529cca154300d15f08887d6b61f3236140">Updated docs/sample. Better error handling for a few public methods. …</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2017-03-03T19:52:31Z" data-view-component="true" class="no-wrap">Mar 3, 2017</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="MAINTAINERS.md" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/MAINTAINERS.md">MAINTAINERS.md</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Update MAINTAINERS.md" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/cc0f84c84b4338d818106586937cffaa39edf60d">Update MAINTAINERS.md</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-03-11T01:05:44Z" data-view-component="true" class="no-wrap">Mar 11, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="README.md" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/README.md">README.md</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Add instructions for running tests in Windows / WSL (#348)" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/5d3d9126b74aba91dc53e38af336ce3404b5bb9a">Add instructions for running tests in Windows / WSL (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="817789319" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/348" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/348/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/348">#348</a><a data-pjax="true" title="Add instructions for running tests in Windows / WSL (#348)" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/5d3d9126b74aba91dc53e38af336ce3404b5bb9a">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-02-27T16:05:07Z" data-view-component="true" class="no-wrap">Feb 27, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="jsdoc.conf.js" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/jsdoc.conf.js">jsdoc.conf.js</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Make documentation (more) paths relative (and thus servable from /)" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/56644bc820a68c9294338d97f26e4eff6532b857">Make documentation (more) paths relative (and thus servable from /)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-09-21T18:51:15Z" data-view-component="true" class="no-wrap">Sep 21, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="jsdoc.ts.conf.js" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/jsdoc.ts.conf.js">jsdoc.ts.conf.js</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Add types definition (#333)

* Added ESModule Distribution

* Fixed window property substitution

* fixing artifacts from old branch

* Merge remote-tracking branch 'upstream/master'

* added jsdoc &gt; .d.ts

* Fix indentation

* Replace .vscode with eslint:indent

Co-authored-by: Jona Andersen &lt;jona@ndrsn.org&gt;" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/b29115cd728be6e2b29c3165e3afbb967e66ebb4">Add types definition (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="762490651" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/333" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/333/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/333">#333</a><a data-pjax="true" title="Add types definition (#333)

* Added ESModule Distribution

* Fixed window property substitution

* fixing artifacts from old branch

* Merge remote-tracking branch 'upstream/master'

* added jsdoc &gt; .d.ts

* Fix indentation

* Replace .vscode with eslint:indent

Co-authored-by: Jona Andersen &lt;jona@ndrsn.org&gt;" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/b29115cd728be6e2b29c3165e3afbb967e66ebb4">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-02-01T13:12:19Z" data-view-component="true" class="no-wrap">Feb 1, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="karma.conf.js" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/karma.conf.js">karma.conf.js</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Split original source data from viewed data (#334)

* Add chai assertion library to tests

* Rename applyFilter -&gt; applyFilters

* Add property boundData as alias for originalData

* Add property viewData as alias for data

viewData reflects the data that's painted on screen, after filtering and sorting and any other operations have been applied to the original data.

* Read from viewData instead of data for tests

* Use viewData when touch-selecting area

* Rename applyDataTransforms -&gt; refresh

* Move `refreshFromOrigialData` into `refresh` method

Method is only called once, and does not seem to much beyond copy an array.

* Remove unused data declaration

* Use viewData to draw, in context menu

Tests are passing, but that's only because self.data is stil being assigned in .refresh(). Once we remove that, a bunch of tests in events.js will fail. Tackling that in another commit.

* Mark self.data locations (to investigate)

* Improve findRowScrollTop RangeError

* Use `viewData` in `self.resize()`

* Alter originalData when calling insertColumn

* Refactor getSelectedData to use viewData

Renamed variables for clarity

* Base createRowOrders on originalData instead of viewData

... because viewData maybe filtered and thus shorter

* Only create tempSchema is originalData is empty

* Delete column from originalData

* Compare against viewData in endEdit, not data

* self.scroll refers to viewData instead of self.data

* Use viewData where appropriate

* Ensure all tests are run

For some reason, removing the self.data assignment fails tests in such a way that they are not reported as failed, but simply causing them to be skipped silently.

* Add devServer

* Rename variables for clarity

* Stop setting self.data in refresh(), update comments

* Use originalData in self.rowOrder()

* Rename data -&gt; viewData in draw()

* Rename d -&gt; rowIndex

* Rename r -&gt; rowOrderIndex

* Rename d -&gt; rowData

* Rename rd -&gt; rowData

* Clean up drawRowHeader

* Rename n -&gt; rowOrderIndex

* Rename variables

s -&gt; schema
o -&gt; columnOrderIndex
i -&gt; headerIndex

* Rename n -&gt; rowOrderIndex

* Rename i -&gt; headerIndex

* Rename o -&gt; columnOrderIndex

* Add viewRowIndex/viewColumnIndex to cell

* Add failing tests for viewRowIndex/viewColumnIndex

* Revise failing tests, add `getBoundRowIndexFromViewRowIndex` method

* Rename getBoundRowIndex -&gt; getBoundRowIndexFromViewRowIndex

* Turn the other tests back on

* Calculate viewData based on filters and sorting

Because filtering and sorting changes the view row index, we need to calculate a mapping from viewRowIndex to boundRowIndex (i.e. position in original data array) each time we apply filters or sort.

This commit renames applyFilters, and the new function includes both filtering and sorting to make sure the view index to original index mapping remains correct. We could have split this up into two distinct steps, filtering and sorting, but it would have meant some code duplication for generating the row index mapping, and I'm doubtful it would serve much purpose, as self.orderings.sort() was only called in refresh anyway.

* Call refresh() when re-ordering column

* Fix beforeEndEdit event

* Fix pasteData to alter originalData

* Serve tutorials in development mode

* Add hasActiveFilters method

* Render actual row numbers when filtering

Instead of simply rendering the viewed row index, this commit renders the row numbers as they appear in the original data array." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/2b3947c482a7c565c4e0c1a4ce66fbd92382040f">Split original source data from viewed data (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="765727803" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/334" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/334/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/334">#334</a><a data-pjax="true" title="Split original source data from viewed data (#334)

* Add chai assertion library to tests

* Rename applyFilter -&gt; applyFilters

* Add property boundData as alias for originalData

* Add property viewData as alias for data

viewData reflects the data that's painted on screen, after filtering and sorting and any other operations have been applied to the original data.

* Read from viewData instead of data for tests

* Use viewData when touch-selecting area

* Rename applyDataTransforms -&gt; refresh

* Move `refreshFromOrigialData` into `refresh` method

Method is only called once, and does not seem to much beyond copy an array.

* Remove unused data declaration

* Use viewData to draw, in context menu

Tests are passing, but that's only because self.data is stil being assigned in .refresh(). Once we remove that, a bunch of tests in events.js will fail. Tackling that in another commit.

* Mark self.data locations (to investigate)

* Improve findRowScrollTop RangeError

* Use `viewData` in `self.resize()`

* Alter originalData when calling insertColumn

* Refactor getSelectedData to use viewData

Renamed variables for clarity

* Base createRowOrders on originalData instead of viewData

... because viewData maybe filtered and thus shorter

* Only create tempSchema is originalData is empty

* Delete column from originalData

* Compare against viewData in endEdit, not data

* self.scroll refers to viewData instead of self.data

* Use viewData where appropriate

* Ensure all tests are run

For some reason, removing the self.data assignment fails tests in such a way that they are not reported as failed, but simply causing them to be skipped silently.

* Add devServer

* Rename variables for clarity

* Stop setting self.data in refresh(), update comments

* Use originalData in self.rowOrder()

* Rename data -&gt; viewData in draw()

* Rename d -&gt; rowIndex

* Rename r -&gt; rowOrderIndex

* Rename d -&gt; rowData

* Rename rd -&gt; rowData

* Clean up drawRowHeader

* Rename n -&gt; rowOrderIndex

* Rename variables

s -&gt; schema
o -&gt; columnOrderIndex
i -&gt; headerIndex

* Rename n -&gt; rowOrderIndex

* Rename i -&gt; headerIndex

* Rename o -&gt; columnOrderIndex

* Add viewRowIndex/viewColumnIndex to cell

* Add failing tests for viewRowIndex/viewColumnIndex

* Revise failing tests, add `getBoundRowIndexFromViewRowIndex` method

* Rename getBoundRowIndex -&gt; getBoundRowIndexFromViewRowIndex

* Turn the other tests back on

* Calculate viewData based on filters and sorting

Because filtering and sorting changes the view row index, we need to calculate a mapping from viewRowIndex to boundRowIndex (i.e. position in original data array) each time we apply filters or sort.

This commit renames applyFilters, and the new function includes both filtering and sorting to make sure the view index to original index mapping remains correct. We could have split this up into two distinct steps, filtering and sorting, but it would have meant some code duplication for generating the row index mapping, and I'm doubtful it would serve much purpose, as self.orderings.sort() was only called in refresh anyway.

* Call refresh() when re-ordering column

* Fix beforeEndEdit event

* Fix pasteData to alter originalData

* Serve tutorials in development mode

* Add hasActiveFilters method

* Render actual row numbers when filtering

Instead of simply rendering the viewed row index, this commit renders the row numbers as they appear in the original data array." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/2b3947c482a7c565c4e0c1a4ce66fbd92382040f">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-02-01T12:59:44Z" data-view-component="true" class="no-wrap">Feb 1, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="package-lock.json" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/package-lock.json">package-lock.json</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Release v0.3.7" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/bcd959407848889c5aefeb61b03a5e1e998e458c">Release v0.3.7</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-08-30T09:26:07Z" data-view-component="true" class="no-wrap">Aug 30, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="package.json" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/package.json">package.json</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Release v0.3.7" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/bcd959407848889c5aefeb61b03a5e1e998e458c">Release v0.3.7</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-08-30T09:26:07Z" data-view-component="true" class="no-wrap">Aug 30, 2021</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="rollup.config.js" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/rollup.config.js">rollup.config.js</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Fix ES Module build (#318)

* Added ESModule Distribution

* Fixed window property substitution

* fixed ESModule code substitution

* remove esFill

* fix indentation

* Removal of globals (use treeshaking)

* Fixed build option, added comment

* Replaced variable with string" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/44a673b3bbddd86bcda395f7e3ade095e4d25674">Fix ES Module build (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="747901896" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/318" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/318/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/318">#318</a><a data-pjax="true" title="Fix ES Module build (#318)

* Added ESModule Distribution

* Fixed window property substitution

* fixed ESModule code substitution

* remove esFill

* fix indentation

* Removal of globals (use treeshaking)

* Fixed build option, added comment

* Replaced variable with string" class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/44a673b3bbddd86bcda395f7e3ade095e4d25674">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2020-11-26T00:15:27Z" data-view-component="true" class="no-wrap">Nov 26, 2020</time-ago>
          </div>

        </div>
        <div role="row" class="Box-row Box-row--focus-gray py-2 d-flex position-relative js-navigation-item ">
          <div role="gridcell" class="mr-3 flex-shrink-0" style="width: 16px;">
              <svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file color-icon-tertiary">
    <path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path>
</svg>
          </div>

          <div role="rowheader" class="flex-auto min-width-0 col-md-2 mr-3">
            <span class="css-truncate css-truncate-target d-block width-fit"><a class="js-navigation-open Link--primary" title="webpack.config.js" data-pjax="#repo-content-pjax-container" href="/TonyGermaneri/canvas-datagrid/blob/master/webpack.config.js">webpack.config.js</a></span>
          </div>

          <div role="gridcell" class="flex-auto min-width-0 d-none d-md-block col-5 mr-3" >
              <span class="css-truncate css-truncate-target d-block width-fit markdown-title">
                    <a data-pjax="true" title="Split original source data from viewed data (#334)

* Add chai assertion library to tests

* Rename applyFilter -&gt; applyFilters

* Add property boundData as alias for originalData

* Add property viewData as alias for data

viewData reflects the data that's painted on screen, after filtering and sorting and any other operations have been applied to the original data.

* Read from viewData instead of data for tests

* Use viewData when touch-selecting area

* Rename applyDataTransforms -&gt; refresh

* Move `refreshFromOrigialData` into `refresh` method

Method is only called once, and does not seem to much beyond copy an array.

* Remove unused data declaration

* Use viewData to draw, in context menu

Tests are passing, but that's only because self.data is stil being assigned in .refresh(). Once we remove that, a bunch of tests in events.js will fail. Tackling that in another commit.

* Mark self.data locations (to investigate)

* Improve findRowScrollTop RangeError

* Use `viewData` in `self.resize()`

* Alter originalData when calling insertColumn

* Refactor getSelectedData to use viewData

Renamed variables for clarity

* Base createRowOrders on originalData instead of viewData

... because viewData maybe filtered and thus shorter

* Only create tempSchema is originalData is empty

* Delete column from originalData

* Compare against viewData in endEdit, not data

* self.scroll refers to viewData instead of self.data

* Use viewData where appropriate

* Ensure all tests are run

For some reason, removing the self.data assignment fails tests in such a way that they are not reported as failed, but simply causing them to be skipped silently.

* Add devServer

* Rename variables for clarity

* Stop setting self.data in refresh(), update comments

* Use originalData in self.rowOrder()

* Rename data -&gt; viewData in draw()

* Rename d -&gt; rowIndex

* Rename r -&gt; rowOrderIndex

* Rename d -&gt; rowData

* Rename rd -&gt; rowData

* Clean up drawRowHeader

* Rename n -&gt; rowOrderIndex

* Rename variables

s -&gt; schema
o -&gt; columnOrderIndex
i -&gt; headerIndex

* Rename n -&gt; rowOrderIndex

* Rename i -&gt; headerIndex

* Rename o -&gt; columnOrderIndex

* Add viewRowIndex/viewColumnIndex to cell

* Add failing tests for viewRowIndex/viewColumnIndex

* Revise failing tests, add `getBoundRowIndexFromViewRowIndex` method

* Rename getBoundRowIndex -&gt; getBoundRowIndexFromViewRowIndex

* Turn the other tests back on

* Calculate viewData based on filters and sorting

Because filtering and sorting changes the view row index, we need to calculate a mapping from viewRowIndex to boundRowIndex (i.e. position in original data array) each time we apply filters or sort.

This commit renames applyFilters, and the new function includes both filtering and sorting to make sure the view index to original index mapping remains correct. We could have split this up into two distinct steps, filtering and sorting, but it would have meant some code duplication for generating the row index mapping, and I'm doubtful it would serve much purpose, as self.orderings.sort() was only called in refresh anyway.

* Call refresh() when re-ordering column

* Fix beforeEndEdit event

* Fix pasteData to alter originalData

* Serve tutorials in development mode

* Add hasActiveFilters method

* Render actual row numbers when filtering

Instead of simply rendering the viewed row index, this commit renders the row numbers as they appear in the original data array." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/2b3947c482a7c565c4e0c1a4ce66fbd92382040f">Split original source data from viewed data (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="765727803" data-permission-text="Title is private" data-url="https://github.com/TonyGermaneri/canvas-datagrid/issues/334" data-hovercard-type="pull_request" data-hovercard-url="/TonyGermaneri/canvas-datagrid/pull/334/hovercard" href="https://github.com/TonyGermaneri/canvas-datagrid/pull/334">#334</a><a data-pjax="true" title="Split original source data from viewed data (#334)

* Add chai assertion library to tests

* Rename applyFilter -&gt; applyFilters

* Add property boundData as alias for originalData

* Add property viewData as alias for data

viewData reflects the data that's painted on screen, after filtering and sorting and any other operations have been applied to the original data.

* Read from viewData instead of data for tests

* Use viewData when touch-selecting area

* Rename applyDataTransforms -&gt; refresh

* Move `refreshFromOrigialData` into `refresh` method

Method is only called once, and does not seem to much beyond copy an array.

* Remove unused data declaration

* Use viewData to draw, in context menu

Tests are passing, but that's only because self.data is stil being assigned in .refresh(). Once we remove that, a bunch of tests in events.js will fail. Tackling that in another commit.

* Mark self.data locations (to investigate)

* Improve findRowScrollTop RangeError

* Use `viewData` in `self.resize()`

* Alter originalData when calling insertColumn

* Refactor getSelectedData to use viewData

Renamed variables for clarity

* Base createRowOrders on originalData instead of viewData

... because viewData maybe filtered and thus shorter

* Only create tempSchema is originalData is empty

* Delete column from originalData

* Compare against viewData in endEdit, not data

* self.scroll refers to viewData instead of self.data

* Use viewData where appropriate

* Ensure all tests are run

For some reason, removing the self.data assignment fails tests in such a way that they are not reported as failed, but simply causing them to be skipped silently.

* Add devServer

* Rename variables for clarity

* Stop setting self.data in refresh(), update comments

* Use originalData in self.rowOrder()

* Rename data -&gt; viewData in draw()

* Rename d -&gt; rowIndex

* Rename r -&gt; rowOrderIndex

* Rename d -&gt; rowData

* Rename rd -&gt; rowData

* Clean up drawRowHeader

* Rename n -&gt; rowOrderIndex

* Rename variables

s -&gt; schema
o -&gt; columnOrderIndex
i -&gt; headerIndex

* Rename n -&gt; rowOrderIndex

* Rename i -&gt; headerIndex

* Rename o -&gt; columnOrderIndex

* Add viewRowIndex/viewColumnIndex to cell

* Add failing tests for viewRowIndex/viewColumnIndex

* Revise failing tests, add `getBoundRowIndexFromViewRowIndex` method

* Rename getBoundRowIndex -&gt; getBoundRowIndexFromViewRowIndex

* Turn the other tests back on

* Calculate viewData based on filters and sorting

Because filtering and sorting changes the view row index, we need to calculate a mapping from viewRowIndex to boundRowIndex (i.e. position in original data array) each time we apply filters or sort.

This commit renames applyFilters, and the new function includes both filtering and sorting to make sure the view index to original index mapping remains correct. We could have split this up into two distinct steps, filtering and sorting, but it would have meant some code duplication for generating the row index mapping, and I'm doubtful it would serve much purpose, as self.orderings.sort() was only called in refresh anyway.

* Call refresh() when re-ordering column

* Fix beforeEndEdit event

* Fix pasteData to alter originalData

* Serve tutorials in development mode

* Add hasActiveFilters method

* Render actual row numbers when filtering

Instead of simply rendering the viewed row index, this commit renders the row numbers as they appear in the original data array." class="Link--secondary" href="/TonyGermaneri/canvas-datagrid/commit/2b3947c482a7c565c4e0c1a4ce66fbd92382040f">)</a>
              </span>
          </div>

          <div role="gridcell" class="color-text-tertiary text-right" style="width:100px;">
              <time-ago datetime="2021-02-01T12:59:44Z" data-view-component="true" class="no-wrap">Feb 1, 2021</time-ago>
          </div>

        </div>
    </div>
    <div class="Details-content--shown Box-footer d-md-none p-0">
      <button aria-expanded="false" type="button" data-view-component="true" class="js-details-target btn-link d-block width-full px-3 py-2">
  
  
        View code

  

</button>    </div>
  </div>




</div>

    <readme-toc>

    <div id="readme" class="Box md js-code-block-container Box--responsive">

      <div class="d-flex  js-sticky js-position-sticky top-0 border-top-0 border-bottom p-2 flex-items-center flex-justify-between color-bg-primary rounded-top-2"  style="position: sticky; z-index: 90;" >
        <div class="d-flex flex-items-center">
            <details
  data-target="readme-toc.trigger"
  data-menu-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;trigger&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}"
  data-menu-hydro-click-hmac="e4868958ca499bc18eaa969a12da45bc1084b75272cd706e56038b28bc6e7c04"
  class="dropdown details-reset details-overlay"
>
  <summary
    class="btn btn-octicon m-0 mr-2 p-2"
    aria-haspopup="true"
    aria-label="Table of Contents">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-list-unordered">
    <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg>
  </summary>


  <details-menu class="SelectMenu" role="menu">
    <div class="SelectMenu-modal rounded-3 mt-1" style="max-height:340px;">

        <div class="SelectMenu-filter">
          <input
            class="SelectMenu-input form-control js-filterable-field"
            id="toc-filter-field"
            type="text"
            autocomplete="off"
            spellcheck="false"
            autofocus
            placeholder="Filter headings"
            aria-label="Filter headings">
        </div>

      <div class="SelectMenu-list SelectMenu-list--borderless p-2" style="overscroll-behavior: contain;" data-filterable-for="toc-filter-field" data-filterable-type="substring">
          <a role="menuitem" class="filter-item SelectMenu-item py-1 text-emphasized" style="padding-left: 12px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#canvas-datagrid">canvas-datagrid</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 24px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#installation">Installation</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 24px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#getting-started">Getting started</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 24px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#using-pure-javascript">Using pure JavaScript</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 24px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#using-web-component">Using Web Component</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 24px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#using-vue">Using Vue</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 24px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#more-demos">More Demos</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 24px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#building--testing">Building &amp; Testing</a>
          <a role="menuitem" class="filter-item SelectMenu-item py-1 " style="padding-left: 36px;" data-action="click:readme-toc#blur" data-targets="readme-toc.entries" data-hydro-click="{&quot;event_type&quot;:&quot;repository_toc_menu.click&quot;,&quot;payload&quot;:{&quot;target&quot;:&quot;entry&quot;,&quot;repository_id&quot;:74969884,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="e7ab756363049419fbed9771e4d8f48a71ab7cdb8b0fbe40f2cf66f1ef87b7e7" href="#windows-10-wsl-testing">Windows 10 WSL Testing</a>
      </div>
    </div>
  </details-menu>
</details>

          <h2 class="Box-title">
            <a href="#readme" data-view-component="true" class="Link--primary">README.md</a>
          </h2>
        </div>
      </div>

          <div class="Popover anim-scale-in js-tagsearch-popover"
     hidden
     data-tagsearch-url="/TonyGermaneri/canvas-datagrid/find-definition"
     data-tagsearch-ref="master"
     data-tagsearch-path="README.md"
     data-tagsearch-lang="Markdown"
     data-hydro-click="{&quot;event_type&quot;:&quot;code_navigation.click_on_symbol&quot;,&quot;payload&quot;:{&quot;action&quot;:&quot;click_on_symbol&quot;,&quot;repository_id&quot;:74969884,&quot;ref&quot;:&quot;master&quot;,&quot;language&quot;:&quot;Markdown&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}"
     data-hydro-click-hmac="f1146026b35123cb9a5f54fc21f349c4a546c039988d9a74924db2a687c2d1bd">
  <div class="Popover-message Popover-message--large Popover-message--top-left TagsearchPopover mt-1 mb-4 mx-auto Box color-shadow-large">
    <div class="TagsearchPopover-content js-tagsearch-popover-content overflow-auto" style="will-change:transform;">
    </div>
  </div>
</div>

        <div data-target="readme-toc.content" class="Box-body px-5 pb-5">
          <article class="markdown-body entry-content container-lg" itemprop="text"><h1><a id="user-content-canvas-datagrid" class="anchor" aria-hidden="true" href="#canvas-datagrid"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>canvas-datagrid</h1>
<p><a href="https://canvas-datagrid.js.org/demo.html" rel="nofollow">Demo</a> - City of Chicago government employee list. Thanks to <a href="https://www.data.gov/" rel="nofollow">data.gov</a>.</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://camo.githubusercontent.com/0ae19ce2575cf030932c2095198cd9f8568f0c616c8a4bee56e84e57b86fff4f/68747470733a2f2f63616e7661732d64617461677269642e6a732e6f72672f696d616765732f6461746167726964312e706e67"><img src="https://camo.githubusercontent.com/0ae19ce2575cf030932c2095198cd9f8568f0c616c8a4bee56e84e57b86fff4f/68747470733a2f2f63616e7661732d64617461677269642e6a732e6f72672f696d616765732f6461746167726964312e706e67" alt="canvas-datagrid" data-canonical-src="https://canvas-datagrid.js.org/images/datagrid1.png" style="max-width:100%;"></a></p>
<p><a href="https://www.npmjs.com/package/canvas-datagrid" rel="nofollow"><img src="https://camo.githubusercontent.com/e1f2283f94098f76ef7877a4457a3f883ea7408178815ceb0d2e2cdf329c9f87/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f63616e7661732d64617461677269642e737667" alt="NPM" data-canonical-src="https://img.shields.io/npm/v/canvas-datagrid.svg" style="max-width:100%;"></a>
<a href="https://opensource.org/licenses/BSD-3-Clause" rel="nofollow"><img src="https://camo.githubusercontent.com/8ccf186e7288af6d88a1f6a930c0fcc4e7a8a9936b34e07629d815d1eab4d977/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d425344253230332d2d436c617573652d626c75652e737667" alt="License" data-canonical-src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" style="max-width:100%;"></a>
<a href="https://www.webcomponents.org/element/TonyGermaneri/canvas-datagrid" rel="nofollow"><img src="https://camo.githubusercontent.com/fa095f7c7b24972f3525b39a6f31c15626f3a4cc019314b4f19ad88ccfd47ddb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f776562636f6d706f6e656e74732e6f72672d7075626c69736865642d626c75652e737667" alt="Published on webcomponents.org" data-canonical-src="https://img.shields.io/badge/webcomponents.org-published-blue.svg" style="max-width:100%;"></a></p>
<ul>
<li>Works with Firefox, Edge, Safari and Chrome.</li>
<li>Native support for touch devices (phones and tablets).</li>
<li>Rich <a href="https://canvas-datagrid.js.org/" rel="nofollow">documentation</a>, <a href="https://canvas-datagrid.js.org/#tutorials" rel="nofollow">tutorials</a>, and <a href="https://canvas-datagrid.slack.com/" rel="nofollow">slack support</a>.</li>
<li>Single canvas element, drawn in immediate mode, data size does not impact performance.</li>
<li>Support for unlimited rows and columns without paging or loading.</li>
<li>Rich API of events, methods and properties using the familiar W3C DOM interface.</li>
<li>Extensible styling, filtering, formatting, resizing, selecting, and ordering.</li>
<li>Support for hierarchal drill in style row level inner grids as well grids in cells.</li>
<li>Customizable hierarchal context menu.</li>
<li>Built in and custom styles.</li>
<li>W3C Web Component. Works in all frameworks.</li>
<li>Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.</li>
<li>Small file size</li>
</ul>
<p><a href="https://canvas-datagrid.js.org/" rel="nofollow">Documentation</a></p>
<p><a href="https://canvas-datagrid.js.org/#tutorials" rel="nofollow">Tutorials</a></p>
<p><a href="https://canvas-datagrid.slack.com/" rel="nofollow">Slack Support</a> (message author for invite)</p>
<p><a href="https://canvas-datagrid.js.org/styleBuilder.html" rel="nofollow">Style Builder</a></p>
<p><a href="https://canvas-datagrid.js.org/canvas-datagrid.js" rel="nofollow">Download latest version (minified)</a></p>
<p><a href="https://canvas-datagrid.js.org/test/tests.html" rel="nofollow">Tests</a></p>
<p><a href="https://github.com/TonyGermaneri/canvas-datagrid">Source Code</a></p>
<p><a href="https://canvas-datagrid.js.org/build/report/lcov-report/index.html" rel="nofollow">Latest Test Coverage</a></p>
<h2><a id="user-content-installation" class="anchor" aria-hidden="true" href="#installation"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Installation</h2>
<p>With <a href="https://www.npmjs.com/package/canvas-datagrid" rel="nofollow">npm</a></p>
<div class="highlight highlight-text-shell-session position-relative" data-snippet-clipboard-copy-content="npm install canvas-datagrid
"><pre><span class="pl-c1">npm install canvas-datagrid</span></pre></div>
<p>Place the single source file <code>./dist/canvas-datagrid.js</code> in your web page using a script tag that points to the source or use webpack.</p>
<div class="highlight highlight-text-html-basic position-relative" data-snippet-clipboard-copy-content="&lt;script src=&quot;dist/canvas-datagrid.js&quot;&gt;&lt;/script&gt;
"><pre><span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">dist/canvas-datagrid.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p>Alternatively, instead of downloading and installing, you can link directly to an NPM CDN like <a href="https://unpkg.com" rel="nofollow">unpkg.com</a>.</p>
<div class="highlight highlight-text-html-basic position-relative" data-snippet-clipboard-copy-content="&lt;script src=&quot;https://unpkg.com/canvas-datagrid&quot;&gt;&lt;/script&gt;
"><pre><span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://unpkg.com/canvas-datagrid</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p>A function will be added to the global scope of the web page called <code>canvasDatagrid</code> as well as module loader definitions.</p>
<h2><a id="user-content-getting-started" class="anchor" aria-hidden="true" href="#getting-started"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Getting started</h2>
<p>Works <a href="https://canvas-datagrid.js.org/amdDemo.html" rel="nofollow">with webpack</a>, <a href="https://canvas-datagrid.js.org/demo.html" rel="nofollow">without webpack</a> or as a <a href="https://canvas-datagrid.js.org/webcomponentDemo.html" rel="nofollow">web component</a>.
No matter how you load it, <code>canvasDatagrid</code> is declared in the global scope.</p>
<p>Canvas-datagrid is a <a href="https://www.webcomponents.org/element/TonyGermaneri/canvas-datagrid" rel="nofollow">Web Component</a> when
in a compatible browser, otherwise it is a <code>&lt;canvas&gt;</code> tag.</p>
<h2><a id="user-content-using-pure-javascript" class="anchor" aria-hidden="true" href="#using-pure-javascript"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Using pure JavaScript</h2>
<div class="highlight highlight-source-js position-relative" data-snippet-clipboard-copy-content="var grid = canvasDatagrid();
document.body.appendChild(grid);
grid.data = [
  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' },
];
"><pre><span class="pl-k">var</span> <span class="pl-s1">grid</span> <span class="pl-c1">=</span> <span class="pl-en">canvasDatagrid</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">grid</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">grid</span><span class="pl-kos">.</span><span class="pl-c1">data</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-kos">{</span> <span class="pl-c1">col1</span>: <span class="pl-s">'row 1 column 1'</span><span class="pl-kos">,</span> <span class="pl-c1">col2</span>: <span class="pl-s">'row 1 column 2'</span><span class="pl-kos">,</span> <span class="pl-c1">col3</span>: <span class="pl-s">'row 1 column 3'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">{</span> <span class="pl-c1">col1</span>: <span class="pl-s">'row 2 column 1'</span><span class="pl-kos">,</span> <span class="pl-c1">col2</span>: <span class="pl-s">'row 2 column 2'</span><span class="pl-kos">,</span> <span class="pl-c1">col3</span>: <span class="pl-s">'row 2 column 3'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<h2><a id="user-content-using-web-component" class="anchor" aria-hidden="true" href="#using-web-component"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Using Web Component</h2>

<div class="highlight highlight-text-html-basic position-relative" data-snippet-clipboard-copy-content="&lt;canvas-datagrid class=&quot;myGridStyle&quot; data=&quot;data can go here too&quot;
  &gt;[ {&quot;col1&quot;: &quot;row 1 column 1&quot;, &quot;col2&quot;: &quot;row 1 column 2&quot;, &quot;col3&quot;: &quot;row 1 column
  3&quot;}, {&quot;col1&quot;: &quot;row 2 column 1&quot;, &quot;col2&quot;: &quot;row 2 column 2&quot;, &quot;col3&quot;: &quot;row 2
  column 3&quot;} ]&lt;/canvas-datagrid
&gt;
"><pre><span class="pl-kos">&lt;</span><span class="pl-ent">canvas-datagrid</span> <span class="pl-c1">class</span>="<span class="pl-s">myGridStyle</span>" <span class="pl-c1">data</span>="<span class="pl-s">data can go here too</span>"
  <span class="pl-kos">&gt;</span>[ {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column
  3"}, {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2
  column 3"} ]<span class="pl-kos">&lt;/</span><span class="pl-ent">canvas-datagrid</span>
<span class="pl-kos">&gt;</span></pre></div>
<p>or</p>
<div class="highlight highlight-source-js position-relative" data-snippet-clipboard-copy-content="var grid = document.createElement('canvas-datagrid');
grid.data = [
  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' },
];
"><pre><span class="pl-k">var</span> <span class="pl-s1">grid</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">'canvas-datagrid'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">grid</span><span class="pl-kos">.</span><span class="pl-c1">data</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span>
  <span class="pl-kos">{</span> <span class="pl-c1">col1</span>: <span class="pl-s">'row 1 column 1'</span><span class="pl-kos">,</span> <span class="pl-c1">col2</span>: <span class="pl-s">'row 1 column 2'</span><span class="pl-kos">,</span> <span class="pl-c1">col3</span>: <span class="pl-s">'row 1 column 3'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">{</span> <span class="pl-c1">col1</span>: <span class="pl-s">'row 2 column 1'</span><span class="pl-kos">,</span> <span class="pl-c1">col2</span>: <span class="pl-s">'row 2 column 2'</span><span class="pl-kos">,</span> <span class="pl-c1">col3</span>: <span class="pl-s">'row 2 column 3'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">]</span><span class="pl-kos">;</span></pre></div>
<h2><a id="user-content-using-vue" class="anchor" aria-hidden="true" href="#using-vue"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Using Vue</h2>
<div class="highlight highlight-text-html-vue position-relative" data-snippet-clipboard-copy-content="&lt;canvas-datagrid :data.prop=&quot;[{&quot;col1&quot;: &quot;row 1 column 1&quot;}]&quot;&gt;&lt;/canvas-datagrid&gt;
"><pre>&lt;<span class="pl-ent">canvas-datagrid</span> :<span class="pl-e">data</span>.<span class="pl-e">prop</span>=<span class="pl-s1"><span class="pl-pds">"</span>[{<span class="pl-s"><span class="pl-pds">"</span>col1<span class="pl-pds">"</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>row 1 column 1<span class="pl-pds">"</span></span>}]<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">canvas-datagrid</span>&gt;</pre></div>
<h2><a id="user-content-more-demos" class="anchor" aria-hidden="true" href="#more-demos"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>More Demos</h2>
<ul>
<li>
<p><a href="https://canvas-datagrid.js.org/vueExample.html" rel="nofollow">Using Vue</a></p>
</li>
<li>
<p><a href="https://canvas-datagrid.js.org/amdDemo.html" rel="nofollow">Using Webpack3: AMD</a></p>
</li>
<li>
<p><a href="https://canvas-datagrid.js.org/reactExample.html" rel="nofollow">Using React</a></p>
</li>
<li>
<p><a href="https://canvas-datagrid.js.org/webcomponentDemo.html" rel="nofollow">Web component example</a></p>
</li>
<li>
<p><a href="https://canvas-datagrid.js.org/demo.html" rel="nofollow">Loading data with XHR</a></p>
</li>
<li>
<p><a href="https://canvas-datagrid.js.org/sparklineDemo.html" rel="nofollow">Sparkline example</a></p>
</li>
<li>
<p><a href="https://canvas-datagrid.js.org/xhrPagingDemo.html" rel="nofollow">XHR data paging demo Jeopardy Questions API</a></p>
</li>
</ul>
<p>Note about XHR paging demo: Thanks to <a href="http://jservice.io/" rel="nofollow">jservice</a> for the use of the free paging API. You must "load unsafe scripts" or relevant command to allow HTTPS (github) to make XHR requests to HTTP (Jeopardy Questions API). There is nothing unsafe about this.</p>
<h2><a id="user-content-building--testing" class="anchor" aria-hidden="true" href="#building--testing"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Building &amp; Testing</h2>
<p>To install development dependencies. Required to build or test.</p>
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="npm install
"><pre><code>npm install
</code></pre></div>
<p>To build production and debug versions:</p>
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="npm run build
"><pre><code>npm run build
</code></pre></div>
<p>To build documentation:</p>
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="npm run build:docs
"><pre><code>npm run build:docs
</code></pre></div>
<p>To build types:</p>
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="npm run build:types
"><pre><code>npm run build:types
</code></pre></div>
<p>To run tests. Note: Headless tests will mostly fail due to lack of headless canvas pixel detection support. Use VM testing or your browser.</p>
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="npm test
"><pre><code>npm test
</code></pre></div>
<h3><a id="user-content-windows-10-wsl-testing" class="anchor" aria-hidden="true" href="#windows-10-wsl-testing"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Windows 10 WSL Testing</h3>
<p><em>This is info for wsl version 1. v2 seems to be <a href="https://dev.to/davelsan/comment/nnf5" rel="nofollow">different</a>.</em></p>
<ul>
<li><code>CHROME_BIN</code> needs to be set to the location of your Google Chrome exe in Windows. (e.g. <code>/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe</code>)
<em>in WSL, <code>export CHROME_BIN='path/to/chrome'</code></em></li>
<li>Chrome needs access to <a href="https://stackoverflow.com/a/56204265/292067" rel="nofollow">karma's temp folder</a>.
<ul>
<li>Create a <code>tmp</code> folder on the same Windows drive as your repo.</li>
<li>set <code>TEMP</code> to a folder that exists on the same Windows drive as your repo. (matching capitalization probably matters)
<em>in WSL, <code>export TEMP='/Temp/karma'</code>, if your repo is on drive C, then create folder C:\Temp\karma</em></li>
</ul>
</li>
<li>karma.conf.js needs to be edited
<ul>
<li>Change the browser from <code>ChromeHeadless</code> to <code>Chrome</code></li>
<li>Modify to run ChromeHeadless without sandboxing. This is not ideal, but it seems to be necessary in <a href="https://github.com/microsoft/WSL/issues/3282">WSL</a> and <a href="https://docs.travis-ci.com/user/chrome#sandboxing" rel="nofollow">Linux containers</a> (<a href="https://github.com/karma-runner/karma-chrome-launcher/issues/158#issuecomment-339265457">see also</a>)
<ul>
<li>Add a custom launcher
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="customLaunchers: {
  ChromeHeadlessNoSandbox: {
      base: 'ChromeHeadless',
      flags: ['--no-sandbox']
  }
}
"><pre><code>customLaunchers: {
  ChromeHeadlessNoSandbox: {
      base: 'ChromeHeadless',
      flags: ['--no-sandbox']
  }
}
</code></pre></div>
</li>
<li>Change the browser from <code>ChromeHeadless</code> to <code>ChromeHeadlessNoSandbox</code></li>
</ul>
</li>
</ul>
</li>
</ul>
</article>
        </div>
    </div>

  </readme-toc>


</div>

    <div data-view-component="true" class="flex-shrink-0 col-12 col-md-3">      

      <div class="BorderGrid BorderGrid--spacious" data-pjax>
        <div class="BorderGrid-row hide-sm hide-md">
          <div class="BorderGrid-cell">
              <h2 class="mb-3 h4">About</h2>

    <p class="f4 mt-3">
      Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
    </p>

  <h3 class="sr-only">Topics</h3>
  <div class="mt-3">
      <div class="f6">
      <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:web-component" href="/topics/web-component" title="Topic: web-component" data-view-component="true" class="topic-tag topic-tag-link">
  web-component
</a>
      <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:component" href="/topics/component" title="Topic: component" data-view-component="true" class="topic-tag topic-tag-link">
  component
</a>
      <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:datatable" href="/topics/datatable" title="Topic: datatable" data-view-component="true" class="topic-tag topic-tag-link">
  datatable
</a>
      <a data-ga-click="Topic, repository page" data-octo-click="topic_click" data-octo-dimensions="topic:datagrid" href="/topics/datagrid" title="Topic: datagrid" data-view-component="true" class="topic-tag topic-tag-link">
  datagrid
</a>
  </div>

  </div>

  <h3 class="sr-only">Resources</h3>
  <div class="mt-3">
    <a class="Link--muted" href="#readme">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book mr-2">
    <path fill-rule="evenodd" d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"></path>
</svg>
      Readme
</a>  </div>

  <h3 class="sr-only">License</h3>
  <div class="mt-3">
    <a href="/TonyGermaneri/canvas-datagrid/blob/master/LICENSE" class="Link--muted" >
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-law mr-2">
    <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
</svg>
        BSD-3-Clause License
    </a>
  </div>

  <include-fragment  aria-label="Loading..." src="/TonyGermaneri/canvas-datagrid/hovercards/citation/sidebar_partial?commit=bcd959407848889c5aefeb61b03a5e1e998e458c">
  </include-fragment>

          </div>
        </div>
          <div class="BorderGrid-row">
            <div class="BorderGrid-cell">
              <h2 class="h4 mb-3">
  <a href="/TonyGermaneri/canvas-datagrid/releases" data-view-component="true" class="Link--primary no-underline">
    Releases
      <span title="216" data-view-component="true" class="Counter">216</span>
</a></h2>

  <a class="Link--primary d-flex no-underline" href="/TonyGermaneri/canvas-datagrid/releases/tag/v0.3.7">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag flex-shrink-0 mt-1 color-text-success">
    <path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path>
</svg>
    <div class="ml-2 min-width-0">
      <div class="d-flex">
        <span class="css-truncate css-truncate-target text-bold mr-2" style="max-width: none;">Release v0.3.7</span>
        <span title="Label: Latest" data-view-component="true" class="Label Label--success flex-shrink-0">
          Latest
</span>      </div>
      <div class="text-small color-text-secondary"><relative-time datetime="2021-08-30T09:28:13Z" class="no-wrap">Aug 30, 2021</relative-time></div>
    </div>
</a>    <div data-view-component="true" class="mt-3">
      <a href="/TonyGermaneri/canvas-datagrid/releases" data-view-component="true">
        + 215 releases
</a></div>
            </div>
          </div>
          <div class="BorderGrid-row">
            <div class="BorderGrid-cell">
              <h2 class="h4 mb-3">
  <a href="/users/TonyGermaneri/packages?repo_name=canvas-datagrid" data-view-component="true" class="Link--primary no-underline">
    Packages <span title="0" hidden="hidden" data-view-component="true" class="Counter">0</span>
</a></h2>


      <div class="text-small color-text-secondary">
        No packages published <br>
      </div>



            </div>
          </div>
          <div class="BorderGrid-row" >
            <div class="BorderGrid-cell">
              

    <h2 class="h4 mb-3">
      <a href="/TonyGermaneri/canvas-datagrid/network/dependents?package_id=UGFja2FnZS0xODQzMjgzOA%3D%3D" data-view-component="true" class="Link--primary no-underline">
        Used by <span title="72" data-view-component="true" class="Counter">72</span>
</a>    </h2>

      <a class="d-flex flex-items-center" href="/TonyGermaneri/canvas-datagrid/network/dependents?package_id=UGFja2FnZS0xODQzMjgzOA%3D%3D">
        <ul class="hx_flex-avatar-stack list-style-none min-width-0">
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar avatar-user" height="32" width="32" alt="@Hvtruong11051996" src="https://avatars.githubusercontent.com/u/68523600?s=88&amp;u=9e90ed23d1a9d1ebf14cb64366398de289a9312f&amp;v=4" />
              </li>
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar avatar-user" height="32" width="32" alt="@aryoff" src="https://avatars.githubusercontent.com/u/39173348?s=88&amp;u=6edb1f19a179962ab3398b6a589183fb91b7a801&amp;v=4" />
              </li>
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar avatar-user" height="32" width="32" alt="@ModChino" src="https://avatars.githubusercontent.com/u/44693212?s=88&amp;v=4" />
              </li>
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar avatar-user" height="32" width="32" alt="@me0726" src="https://avatars.githubusercontent.com/u/85285301?s=88&amp;v=4" />
              </li>
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar" height="32" width="32" alt="@dod-advana" src="https://avatars.githubusercontent.com/u/82123680?s=88&amp;v=4" />
              </li>
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar" height="32" width="32" alt="@nhsx" src="https://avatars.githubusercontent.com/u/47388472?s=88&amp;v=4" />
              </li>
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar avatar-user" height="32" width="32" alt="@optalitix" src="https://avatars.githubusercontent.com/u/69202051?s=88&amp;v=4" />
              </li>
              <li class="hx_flex-avatar-stack-item">
                <img class="avatar avatar-user" height="32" width="32" alt="@Yuto23" src="https://avatars.githubusercontent.com/u/70933217?s=88&amp;u=d13e576de40aa2c579c8d6d459363b46bf1d33f9&amp;v=4" />
              </li>
        </ul>
          <span class="px-2 text-bold text-small no-wrap">
            + 64
          </span>
      </a>

            </div>
          </div>
          <div class="BorderGrid-row">
            <div class="BorderGrid-cell">
              <h2 class="h4 mb-3">
  <a href="/TonyGermaneri/canvas-datagrid/graphs/contributors" data-view-component="true" class="Link--primary no-underline">
    Contributors <span title="24" data-view-component="true" class="Counter">24</span>
</a></h2>


    
  <ul class="list-style-none d-flex flex-wrap mb-n2">
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/TonyGermaneri"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/TonyGermaneri/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/17577567?v=4" alt="@TonyGermaneri" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/ndrsn"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/ndrsn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/950979?v=4" alt="@ndrsn" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/jswolf19"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/jswolf19/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/519875?v=4" alt="@jswolf19" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/cthurston"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/cthurston/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/622081?v=4" alt="@cthurston" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/josh-hemphill"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/josh-hemphill/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/46608115?v=4" alt="@josh-hemphill" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/yuanliwei"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/yuanliwei/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/15871845?v=4" alt="@yuanliwei" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/hackwaly"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/hackwaly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/540298?v=4" alt="@hackwaly" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/betososa"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/betososa/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/1018478?v=4" alt="@betososa" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/apps/dependabot"
          class=""
        >
        <img src="https://avatars.githubusercontent.com/in/29110?v=4" alt="@dependabot[bot]" size="32" height="32" width="32" data-view-component="true" class="avatar"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/mdebrauw"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/mdebrauw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/101284?v=4" alt="@mdebrauw" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
    <li class="mb-2 mr-2"
        data-test-selector="grid-mode-element">
      <a href="https://github.com/Imperat"
          class=""
            data-hovercard-type="user" data-hovercard-url="/users/Imperat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
        >
        <img src="https://avatars.githubusercontent.com/u/7069867?v=4" alt="@Imperat" size="32" height="32" width="32" data-view-component="true" class="avatar circle"></img>
      </a>
    </li>
</ul>





  <div data-view-component="true" class="mt-3">
    <a href="/TonyGermaneri/canvas-datagrid/graphs/contributors" data-view-component="true">
      + 13 contributors
</a></div>
            </div>
          </div>
          <div class="BorderGrid-row">
            <div class="BorderGrid-cell">
              <h2 class="h4 mb-3">Languages</h2>
<div class="mb-2">
  <span data-view-component="true" class="Progress">
    <span itemprop="keywords" aria-label="JavaScript 96.7" style="background-color: #f1e05a;width: 96.7%;" data-view-component="true" class="Progress-item"></span>
    <span itemprop="keywords" aria-label="HTML 2.1" style="background-color: #e34c26;width: 2.1%;" data-view-component="true" class="Progress-item"></span>
    <span itemprop="keywords" aria-label="CSS 1.2" style="background-color: #563d7c;width: 1.2%;" data-view-component="true" class="Progress-item"></span>
</span></div>
<ul class="list-style-none">
    <li class="d-inline">
      <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/TonyGermaneri/canvas-datagrid/search?l=javascript"  data-ga-click="Repository, language stats search click, location:repo overview">
        <svg class="octicon octicon-dot-fill mr-2" style="color:#f1e05a;" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
        <span class="color-text-primary text-bold mr-1">JavaScript</span>
        <span>96.7%</span>
      </a>
    </li>
    <li class="d-inline">
      <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/TonyGermaneri/canvas-datagrid/search?l=html"  data-ga-click="Repository, language stats search click, location:repo overview">
        <svg class="octicon octicon-dot-fill mr-2" style="color:#e34c26;" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
        <span class="color-text-primary text-bold mr-1">HTML</span>
        <span>2.1%</span>
      </a>
    </li>
    <li class="d-inline">
      <a class="d-inline-flex flex-items-center flex-nowrap Link--secondary no-underline text-small mr-3" href="/TonyGermaneri/canvas-datagrid/search?l=css"  data-ga-click="Repository, language stats search click, location:repo overview">
        <svg class="octicon octicon-dot-fill mr-2" style="color:#563d7c;" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"></path></svg>
        <span class="color-text-primary text-bold mr-1">CSS</span>
        <span>1.2%</span>
      </a>
    </li>
</ul>

            </div>
          </div>
      </div>
</div>
</div></div>



  </div>
</div>

    </main>
  </div>

  </div>

          
<div class="footer container-xl width-full p-responsive" role="contentinfo">
  <div class="position-relative d-flex flex-row-reverse flex-lg-row flex-wrap flex-lg-nowrap flex-justify-center flex-lg-justify-between pt-6 pb-2 mt-6 f6 color-text-secondary border-top color-border-secondary ">
    <ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0">
      <li class="mr-3 mr-lg-0">&copy; 2021 GitHub, Inc.</li>
        <li class="mr-3 mr-lg-0"><a href="https://docs.github.com/en/github/site-policy/github-terms-of-service" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to terms&quot;,&quot;label&quot;:&quot;text:terms&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="f2f37b5a759b0ff9eeee43391b56c7ac451b7e809e9282e3c6b68abae60fde1b">Terms</a></li>
        <li class="mr-3 mr-lg-0"><a href="https://docs.github.com/en/github/site-policy/github-privacy-statement" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to privacy&quot;,&quot;label&quot;:&quot;text:privacy&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="05cb2385fdc15e5e0549d0bca6f6d672acec00224bf15174cafb306275732ce4">Privacy</a></li>
        <li class="mr-3 mr-lg-0"><a data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to security&quot;,&quot;label&quot;:&quot;text:security&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="fc21746c37477c203484b758724b5ced1e415f5901c65a4760983aa2df9059ef" href="https://github.com/security">Security</a></li>
        <li class="mr-3 mr-lg-0"><a href="https://www.githubstatus.com/" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to status&quot;,&quot;label&quot;:&quot;text:status&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="ec10e4a69492a25274c8ee184325dcbe43fd9fa25daecaf58a3ed0f0355a0b05">Status</a></li>
        <li><a data-ga-click="Footer, go to help, text:Docs" href="https://docs.github.com">Docs</a></li>
    </ul>

    <a aria-label="Homepage" title="GitHub" class="footer-octicon d-none d-lg-block mx-lg-4" href="https://github.com">
      <svg aria-hidden="true" height="24" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github">
    <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
    <ul class="list-style-none d-flex flex-wrap col-12 col-lg-5 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0">
        <li class="mr-3 mr-lg-0"><a href="https://support.github.com" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to contact&quot;,&quot;label&quot;:&quot;text:contact&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="987a719e1c0a0d8535b204834076fdb82d4e3a7be0bd0c86db51f5a6e5852a88">Contact GitHub</a></li>
        <li class="mr-3 mr-lg-0"><a href="https://github.com/pricing" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to Pricing&quot;,&quot;label&quot;:&quot;text:Pricing&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="19144dd3ff35af7dd532cd6b474644a4dd967723cd5a0dafc9a47df9dceeff84">Pricing</a></li>
      <li class="mr-3 mr-lg-0"><a href="https://docs.github.com" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to api&quot;,&quot;label&quot;:&quot;text:api&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="f4e32a679760a8e62271a3bc6ea739d8eb764b95a04c41d35cf50074438d51c2">API</a></li>
      <li class="mr-3 mr-lg-0"><a href="https://services.github.com" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to training&quot;,&quot;label&quot;:&quot;text:training&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="d017ea5fcd598867ca0e71021b99dd633a351a2f051cbbf49a61803ff9a0bd81">Training</a></li>
        <li class="mr-3 mr-lg-0"><a href="https://github.blog" data-hydro-click="{&quot;event_type&quot;:&quot;analytics.event&quot;,&quot;payload&quot;:{&quot;category&quot;:&quot;Footer&quot;,&quot;action&quot;:&quot;go to blog&quot;,&quot;label&quot;:&quot;text:blog&quot;,&quot;originating_url&quot;:&quot;https://github.com/TonyGermaneri/canvas-datagrid&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="5955933cde3acdc812cc2761341f5b0325ae6d9eb3952bedb22fb191cebf228c">Blog</a></li>
        <li><a data-ga-click="Footer, go to about, text:about" href="https://github.com/about">About</a></li>
    </ul>
  </div>
  <div class="d-flex flex-justify-center pb-6">
    <span class="f6 color-text-tertiary"></span>
  </div>

  
</div>



  <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden>
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
    <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
</svg>
    <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
    <path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>
</svg>
    </button>
    You can’t perform that action at this time.
  </div>

  <div class="js-stale-session-flash flash flash-warn flash-banner" hidden
    >
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert">
    <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
</svg>
    <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
    <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
  </div>
    <template id="site-details-dialog">
  <details class="details-reset details-overlay details-overlay-dark lh-default color-text-primary hx_rsm" open>
    <summary role="button" aria-label="Close dialog"></summary>
    <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal">
      <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog>
        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
    <path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>
</svg>
      </button>
      <div class="octocat-spinner my-6 js-details-dialog-spinner"></div>
    </details-dialog>
  </details>
</template>

    <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0">
  <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;">
  </div>
</div>

    <template id="snippet-clipboard-copy-button">
  <div class="zeroclipboard-container position-absolute right-0 top-0">
    <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay" data-copy-feedback="Copied!" data-tooltip-direction="w">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-paste js-clipboard-clippy-icon m-2">
    <path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path>
</svg>
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-text-success d-none m-2">
    <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg>
    </clipboard-copy>
  </div>
</template>




  </body>
</html>

